vue组件通讯的几种方式

组件通信主要有以下几种方式: props,$emit和$on,vuex,$attrs和$listeners,provide和inject,\$parent,$children与 ref,evenbus以及 $root 按使用场景可以划分为以下三类:

• 父子组件通信
  • props
  • $emit和$on
  • $parent和$children
  • ref
  • $attrs和$listeners
• 兄弟组件通信
  • • $parent
    • $root
    • eventBus
    • vuex
• 跨层级通信
  • • eventBus
    • provide和inject
    • vuex

1、props

这是父子间组件通信的常见方式，一般用于父组件向子组件传递数据，并且是响应式的。一般情况下子组件不会去直接改变从父组件同过 prop 传过来的数据，如果想改变的话，一般会在子组件 data 中定义一个变量来进行接收：
注意：这种通信方式是响应式的，一般情况下是用于单向通信的（父向子传递数据），但是如果在通过props特性传的是一个引用类型的数据（如 Object 和 Array ）时，在子组件修改该引用类型的数据时，也会改变父组件中该props的值。所以这种方式也是可以在兄弟间通信的。如下面的例子，在child1或者child2中修改user 都会触发 user的更新。

//parent
<template>
    <child1 :user="user"/>
    <child2 :user="user"/>
</template>
import child1 from "./child1"
import child2 from "./child2"
export default{
    data(){
        return{
            user:{
                userName:'james'
            }
        }
    },
    components:{
        child1,child2
    },
}

//child1.vue
<template>
    <span>{
  {userInfo.uaerName}}</span>
    <button @click="change">修改</button>
</template>
export deafult {
    props:{
        user:Object
    }
    data(){
        return{
            userInfo:this.user
        }
    },
    methods:{
        change(){
            this.userInfo.userName="username被修改了"
        }
    }
}

//child2.vue
<template>
    <span>{
  {userInfo.uaerName}}</span>
</template>
export default{
    props:{
        user:Object
    }
    data(){
        return{
            userInfo:this.user
        }
    }
}

2、 \$emit和$on

这种通信方式主要是 解决子组件向父组件传递数据 的问题。不适合数据隔代传递（跨组件）。

//子组件中
<button @click="send"></button>
...
methods:{
    send(){