vue的12种组件通信方式

一.vue2组件通信共有12种方式,如下:

1. props
2. $emit / v-on
3. .sync
4. v-model
5. ref
6. $children /$parent
7. $attrs /$listeners
8. provide / inject
9. EventBus
10. Vuex
11. $root
12. slot

二.常用的组件通信写法及原理:

1.props

    // Parent.vue 传送
    <template>
    <child :str="str"></child> 
    </template>

    // Child.vue 接收
    export default{
    //第一种写法
    props:['str']
    //第二种写法
    props:{
    str:{ 
    type:String, 
    default:'这是默认数据'
        }
     }

     mounted(){ 
     console.log(this.msg) 
     },
    }

2.v-model的原理

    <com1 v-model="num"></com1>
    等价于
    <com1 :value="num" @input="(val)=>this.num=val"></com1>   

3. .sync的原理

    // 正常父传子： 
    <com1 :a="num" :b="num2"></com1>

    // 加上sync之后父传子： 
    <com1 :a.sync="num" .b.sync="num2"></com1> 

    // 它等价于
    <com1 
      :a="num" @update:a="val=>num=val"
      :b="num2" @update:b="val=>num2=val"></com1> 

    // 相当于多了一个事件监听，事件名是update:a，回调函数中，会把接收到的值赋值给属性绑定的数据项中。

4.ref

ref 如果在普通的DOM元素上，引用指向的就是该DOM元素,如果在子组件上，引用的指向就是子组件实例，然后父组件就可以通过 ref 主动获取子组件的属性或者调用子组件的方法

5.$emit / v-on

子组件通过派发事件的方式给父组件传递数据,子组件通过$emit('事件名')发送自定义事件方法,父组件通过@事件名 的方式监听

6. provide / inject

1. 祖先组件中提供数据： provide('数据名', 数据)
2. 后代组件中使用数据： const data = inject('数据名')

7.slot

    //子组件
    <template>
        <div> 
            <slot :user="user"></slot> 
        </div> 
    </template>

    export default { 
        data(){ 
        return { 
        user:{ name:"张三" } 
            } 
        } 
    }

    //父组件
        <template> 
            <div> 
            <child v-slot="obj"> 
                {{ obj.user.name }}
            </child> 
            </div> 
        </template>

三.父子组件通信可以用

• props
• $emit / v-on
• $attrs /$listeners
• ref
• .sync
• v-model
• $children /$parent

四.兄弟组件通信可以用：

• EventBus
• Vuex
• $parent

五.跨层级组件通信可以用：

• provide/inject
• EventBus
• Vuex
• $attrs /$listeners
• $root