看了就会的vue组件通讯，父传子 子传父 兄弟相传

为什么要使用组件 

我们常常把一些能重复利用的内容封装成组件，这样大大提高了效率避免了不必要的重复。

比如在写页面中：很多页面都会出现按钮、输入框等等，往往样式一模一样，我们就可以把这些封装成组件，谁用的到谁直接调用就行

组件通讯

vue中组件之间的传递又被成为组件通讯。

父传子 ：

1、在父组件的子组件标签上绑定一个自定义属性 ，

:自定义属性名='要传递的数据' ，如下：

 2、在要接收的子组件data同级，通过props来接收

有两种方法：

方法（1）：props:['自定义属性名']

方法（2）：props:{自定义属性名：数据类型} 

两种方法选择一种就行

 接收到之后直接使用就行

子传父：

1、在父组件的子组件标签上绑定一个自定义事件，如图

 2、在子组件定义一个按钮，上面绑定一个点击事件

3、methods里面定义方法，使用this.$emit 将data里面的mysum传递过去

事件名（）{

this.$emit('自定义事件名'，要传递的数据)

}

在这里的‘自定义事件名要和父组件定义的名字一致’
 

 

 4、在方法事件中接收子组件传过来的参数

自定义事件名（接收子组件传过来的参数）{

接收到参数就可以进行相应的操作了，比如让父组件本身的num与传递过来的数据相加

}

兄弟相传：

1、在main.js中创建一个全局的$bus,如下

Vue.prototype.$bus=new Vue()

2、在子组件1中定义一个事件，在事件中使用this.$bus.$emit('自定义事件名'，要传递的数据)

 <input type="text" v-model="title">
      <button @click="change">提交</button>
  
 
    </div>
</template>

<script>
export default {
  // props:['num'],
  props: {
    num: Number
  },
  data() {
    return {
      title: "",
      mysum: 100
    };
  },
  created() {},
  methods: {
    change() {
      this.$bus.$emit("change", this.title);
    },

3、在子组件2created生命周期函数中，使用

this.$bus.$on('子组件1定义的事件名'，（子组件1传递过来的数据参数）=>{

})

可以在data中定义一个变量，接收子组件1传递过来的数据。这样就实现了兄弟之间的传递

<template>
    <div class=''>
        组件2
        <br>
        {{name}}点击了
    </div>
</template>

<script>
export default {
    data() {
        return {
            name:''
        };
    },
    created() {
        this.$bus.$on('change',(val)=>{
            this.name=val

        })
    },
    methods: {

    },
    components:{}
};