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

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 属性

 

 

 2，$ listeners 存放的是父组件中绑定的非原生事件

子或者孙 调用父组件事件

 

 

 孙 通过$emit跨级 传数据给父组件

 

 

方法五 v-model （特殊场景，使用较少）

• 父组件通过v-model传递值给子组件时，会自动传递一个value的prop属性，在子组件中通过this.$emit(‘input’,val)自动修改v-model绑定的值，实例如下

 

 

 

方法六 provide和inject （成对出现，用于父向下传递数据）

方法七 bus中央事件总线（同级组件间通信）

方法八 v-slot（插槽传值，灵活运用）

方法九 vuex （集中的数据处理方式）

这篇感觉有点长了，另外几种方法以及通信总结写在下一篇吧。