父组件向子组件传值
- 父组件用v-bind:X="AAA"
<children-item
:content="item"
v-for="item in list"
:key="item.id"
>
</children-item>
- 子组件用props接受 父组件传过来的值
<script>
export default {
name: 'ChildrenOne',
props: ["content"],
data() {
return {
message: this.content.id
}
}
}
</script>
子组件向父组件传值
- $emit触发事件传参
- 父组件
<children-item
:content="item"
:index="index"
v-for="(item, index) in list"
:key="item.id"
@delete="handleParentClick"
>
</children-item>
methods:{
handleParentClick(index){
delete this.item[index]
}
}
- 子组件
// $emit调用注册的delete事件，，并传递index参数，触发父组件的handleParentClick
this.$emit("delete", this.index)
- 父组件调用子组件定义的获取数据的方法
const refName = this.$refs.tagLogicConfig.getCurrentRefName();// tagLogicConfig为子组件
兄弟组件传值
1.main.js创建一个事件总线，也就是中转站，作为通信的桥梁，可以在main.js中创建一个公共的bus对象(bus.js)，建立中转站，实现组件与组件之间的传值（emit 必须注册挂载在同一实例中）
let bus = new Vue()
Vue.prototype.bus = bus
注册事件
this.bus.$on("ReceiveMessage", function(item) { self.name = item; })
调用事件
this.bus.$emit("ReceiveMessage", this.message)
