详细描述你所知道的组件通信的方式有哪些?并且解释每一种的用法

70 阅读2分钟

参考网站:blog.csdn.net/qq_54753561…

(1) props传递数据

****在父组件子组件添加自定义属性,挂载需要传递的数据,子组件用哪个props来接收,接收方式也可以是数组,也可以是对象,子组件接收到数据之后,不能直接修改父组件的数据,会报错,所以当父组件重新渲染时,数据会被覆盖,如果子组件内要修改的话,推荐使用$emit

(2) v-model

****和.sync类似,可以实现将父组件传给子组件的数据为双向绑定,子组件通过$emit修改父组件的数据

(3).sync

****可以帮我们实现父组件向子组件传递的数据的双向绑定,所以子组件接收到数据后可以直接修改,并且会同时修改父组件的数据

(4).ref

****ref如果在普通的DOM元素上,引用指向的就是该DOM元素

如果在子组件上,引用的指向就是子组件实例,然后父组件就可以通过ref主动获取子组件的属性或者调用子组件的方法

(5)$emit/v-on

在父组件中给子组件绑定自定义事件,然后调用需要的方法,在子组件中使用this.$emit触发父组件的事件,第一个是事件名第二个是参数

(6)attrs/attrs/listeners

多层嵌套组件传递数据时,如果只是传递数据,而不做中间处理的话就可以用这个,比如父组件向孙子组件传递数据时

attrs:包含父作用域里除了classstyle除外的非props属性集合,通过this.attrs:包含父作用域里除了class和style除外的非props属性集合,通过this.attrs获取父作用域中所有符合条件的属性集合,然后还要继续传给子组件内部的其他组件,就可以通过v-bind="$attrs"

listeners:包含父作用域里.native除外的监听事件集合,如果还要继续传给子组件内部的其他组件,就可以通过von="listeners:包含父作用域里.native除外的监听事件集合,如果还要继续传给子组件内部的其他组件,就可以通过v-on="listeners"

使用方法是相同的

(7)children/children/parent的使用

****$children:获取到一个包含所有子组件(不包含孙子组件)的VueComponent对象数组,可以直接拿到子组件中所有的数据和方法等

****$parent:获取到一个父节点的VueComponent对象,同样包含父节点中所有的数据和方法等

(8)provide/inject 祖孙之间通信传值

provide [prəˈvaɪd] 提供

inject [ɪnˈdʒekt] 注射

provide/inject 为依赖注入,说是不推荐直接用于应用程序代码中,但是在一些插件或组件库里却是被常用

provide:可以让我们指定想要提供给后代组件的数据或方法

inject:在任何后代组件中接收想要添加在这个组件上的数据或方法,不管组件嵌套多深都可以直接拿来用

要注意的是provide和inject传递的数据不是响应式的,也就是说用inject接收来数据后,provide里的数据改变了,后代组件中的数据不会改变,除非传入的就是一个可监听的对象

(9)EventBus全局事件总线

EventBus是中央事件总线,不管是父子组件,兄弟组件,跨层级组件等都可以完成通信

(10)Vuex通信

****可以定义共享的数据源,在哪里都可以访问,安装配置,使用即可

(11)具名插槽 + 作用域插槽 slot

****具名插槽是在父组件中通过slot属性,给插槽命名,在子组件中通过slot标签,根据定义好的名字填充到对应的位置。

作用域插槽是带数据的插槽,子组件提供个父组件的参数,父组件根据子组件传递过来的插槽数据来进行不同的展现和填充内容,在标签中通过v-slot="value"来接收数据

(12)$root

****$root可以拿到App.vue里的数据和方法