vue组件通信父传子子传父同级组件跨级通信 vuex（一）

以下是我对Vue通信方式的总结，相对还比较全面，每一种方式都是单独的实例，不易混淆

props和$emit(常用)
$ attrs和$ listeners（跨级通信）
$ parent和$ children（非常简洁）
ref（获取子组件所有属性，事件等）
v-model （特殊情景使用）
provide和inject （成对出现，用于父向下传递数据）
中央事件总线（同级组件通信）
v-slot（插槽传值，灵活运用）
vuex （集中的数据处理方式）

方法一 props和$emit（父子字之间最常用）

1，父组件向子组件传递数据是通过prop传递的

补充： props定义方式不同以及相关用法(类型检查，默认值)
props直接用数组接收所有参数

props: ["numC",'msgC']

props定义接收类型，做类型检查，传值类型不对会报错

props: {
	        numC: { type: Number, },
	        msgC: { type: String, }
       },

props定义还可以定义多种接收类型，并定义默认值，当父组件未传值的时候，显示默认值

props: {
        numC: {
           type:[String,Number,Boolean],
            default: 200
        },
        msgC:{
           type:[String,Number,Array],
            default:"默认值"
        }
    },

注意： props已经有的参数不可在data中再次定义。

2，子组件传递数据给父组件是通过$emit触发事件来做到的

方法二 $ parent 和 $ children（父子之间非常简洁）

在组件内部可以直接通过子组件$ parent对父组件进行操作，父组件通过$ children对子组件进行操作.

1，$ parent

2，$ children 和 $ parent用法一样

方法三绑定ref（获取子组件所有信息）

如果 ref 作用到 html 标签 ,则指向当前的dom 元素
如果 ref 作用到组件上 , 则指向当前的组件对象

方法四 $ attrs和$ listeners（跨级通信）

$ attrs：包含了父作用域中不被 prop 所识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定 (class 和 style 除外)，并且可以通过 v-bind="$ attrs" 传入内部组件。通常配合 interitAttrs 选项一起使用。
$ listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件
简单来说：$ attrs与$ listeners 是两个对象，

1，$ attrs 存放的是父组件中绑定的非 Props 属性