vue2组件通信方式？

一.父子通信

1 父传子

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

 <child :data="list"  />

 在script标签中

 data() {

    return {

      list: ['A', 'B', 'C', 'D']

    }

  },

 在子组件中通过props来接收数据

 props: {

    data: {

      type: Array,

      required: true

    }

}

 在子组件中进行渲染即可

2.子传父

在子组件中通过$emit传递一个方法

          <button @click="$emit('del', index)">删除</button>

 在父组件中接收这个自定义的方法

<child  @del="idx => list.splice(idx, 1)"  />

3.$ref

在父组件的子组件标签绑定一个ref属性,绑定一个值

 在点击事件中通过this.$refs.值来获取当前组件的所有信息

4.$root

在子组件中通过点击按钮事件来获取

 methods: {

    send() {

      console.log(this.$root)//获取的是整个vue实例对象

    }

  }

 5.$parent

与$root相似，获取的也是整个vue实例对象

6.v-model

就是在子组件标签上通过v-model传递一个属性，在子组件中通过value来接收传递过来的数据，并且派发一个名为input的事件

7..sync修饰符

在父组件中的子组件标签上绑定一个自定义属性，自定义属性后面跟着.sync修饰符，在在子组件中派发事件为update:自定义属性

二：兄弟通信

1.eventBus（）事件总栈

可以在main.js文件中或者新建一个文件 ，在其中创建一个空的vue实例对象，并将其挂载到vue原型上，在兄弟A组件中通过$emit派发事件，在兄弟B组件中通过$on来接收事件

  methods: {

    send() {

      this.bus.$emit('send', this.msg)

    }

  }

 

 

  mounted() {

    this.bus.$on('send', val => {

      // console.log(val);

      this.msg = val;

    })

  }

2.vuex

3.pinia

三：跨组件通信 

1.provide/inject

再根组件中通过provide来注入一个数据，在子组件中通过inject来接收数据