vue 组件通信

父组件向子组件传值

• 父组件用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>

子组件向父组件传值

1. $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)

2. 父组件调用子组件定义的获取数据的方法

  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)