Vue 组件通信

父传子：

自定义属性：

子组件中，通过 props 来自定义属性
父组件中，负责把数据，通过 v-bind: 绑定给子组件

父组件向子组件共享数据需要使用自定义属性。示例代码如下：

//父组件
 <Son :msg="message" :user= "user info"></Son>

  data() {
    return {
      message: "hello vue.js",
      userinfo: { name: "zs", age: 20 },
    };
  },
 //子组件
<template>
  <div>
    <h5>Son组件</h5>
    <p>父组件传递过来的msg值是: {{ msg }}</p>
    <p>父组件传递过来的user值是: {{ user }}</p>
  </div>
</template>

props: ['msg','user']

子传父：

自定义事件：

在子组件中调用 this.$emit() 来触发自定义事件
参数1：字符串，表示自定义事件的名称
参数2：值，要发送给父组件的数据
在父组件中，通过 v-on: 来绑定自定义事件，并提供一个事件处理函数。通过事件处理函数的形参，接收到子组件传递过来的数据。

子组件向父组件共享数据使用自定义事件。示例代码如下：

 //子组件
export default {
    data() {
        return {
            {count: 0}
        }
    },
    methods: {
        this.count += 1
        //修改数据时，通过$emit() 触发自定义事件
        this.$emit( 'numchange',this.count)
    }
}
//父组件
<Soni @numchange="getNewCount"></Son>

export default {
    data() {
        return {
            countFromSon: 0
        }
    },
    methods: {
        getNewCount(val) {
        this.countFromSon = val
        }
    }
}

兄弟组件之间传值：

1.在main.js中创建vue实例

main.js给vue的原型添加一个属性，属性值为new Vue()
Vue.prototype.$bus = new Vue()

2.在兄弟组件mychild中

<button type="default" @click="sendBro">发送给兄弟组件</button>
methods:{
    sendBro(){
        this.$bus.$emit("toBro","发送给兄弟组件")
    }
}

3.在兄弟组件mya中接受

mounted() {
    this.$bus.$on("toBro",(name)=>{
        console.log(name)
    })
}