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 (集中的数据处理方式)
这篇感觉有点长了,另外几种方法以及通信总结写在下一篇吧。