我说这是全网最全vue组件通信方式

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了我说这是全网最全vue组件通信方式相关的知识,希望对你有一定的参考价值。

参考技术A prop
event
style和class
natvie修饰符
$listeners
v-model
sync修饰符
$parent 和 $children
$slots 和 $scopedSlots
ref

最常见的组件通信方式,由父组件向子组件传递。prop可接收一个数组或对象

子组件向父组件发送通知,并传递参数

子组件

父组件

父组件可以向子组件传递style 和 class ,style 和 class将合并到子组件根元素上

父组件

子组件

最终渲染结果

父组件在使用子组件时,在子组件上定义一些属性,这些属性将作用于子组件的根元素上,但是不包括style和class

父组件

子组件

最终渲染结果

Tip:子组件可以通过定义 inheritAttrs:false 来紧张 attribute 附着在子组件根元素上 但不影响通过 $attrs 获取数据

在注册事件时,父组件可以通过 navite 修饰符,将事件注册到子组件根元素上

父组件

子组件

子组件可以通过 $listeners 获取父组件传递过来的所有处理函数

父组件在使用子组件时,可以在子组件上绑定v-model,子组件通过定义model的prop和event还获取父组件定义的值

父组件

<compn v-model=" "datas" />

子组件

和 v-model类似,用于双向数据绑定,不同点在于 v-model只能针对一个数据进行绑定,而 sync 修饰符没有限制

子组件

父组件

在组件内部,可以通过$parent 和$children属性,分别获取当前组件的父组件和子组件实例

ref

在使用组件时,可以通过在组件上定义ref来获取组件实例

provide和inject 可以实现深层组件通信,顶层组件只需定义provide,底层组件通过inject接受数据

顶层组件

如果一个组将改变了地址栏,所有监听地址栏的组将都会做出相应的改变,

vuex 过于笨重,通常不建议在小型项目中使用,小型项目可以使用store 或 eventbus代替vuex,vuex本质上就是一个数据仓库。在此不做过多赘述,先挖一个坑,下回再叙。

store模式其实就是一个普通的js模块,各组件可以导入该模块,将数据放到data里面,此时store就具有响应式了。

tip: store模式的缺点是无法跟踪数据的改变,因为所有组件都可以更改数据

以上是关于我说这是全网最全vue组件通信方式的主要内容,如果未能解决你的问题,请参考以下文章

vue组件间通信六种方式(完整版)

vue组件间通信六种方式(完整版)

Vue 组件间通信六种方式(完整版)

vue-bus 组件通信插件

vue源码-vue组件通信方式

vue实现组件通信的5中方式