vue组件之间传参方式

172 阅读1分钟

组件之间传参方式:

父子Coms: 1-12

兄弟Coms: 4/5/11/12

跨级Coms: 4/5/6/7/11/12

1.props 父传子

2.$emit 子传父 (最常用的父子通讯方式)

3.( p a r e n t s / parents/parents/children )

4.$refs 常用于父组件调用子组件的方法(如:列表数据变化通知子组件重新渲染列表等)

5.Vuex 用于任意组件的任意通讯

6.Bus (常用任意两个组件之间通讯)

7.( provide/inject ) (祖先及其后代传值)常用一些多个组件嵌套封装,一个顶层组件内部的后代组件需要用到顶层组件的数据就使用这种方式

8.( a t t r s / attrs/attrs/listeners ) (常用于对原生组件的封装) $attrs 可以获取父组件传进来但没有通过props接收的属性

9..sync (可以帮我们实现父组件向子组件传递的数据 的双向绑定)

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

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

12.slot(把子组件的数据通过插槽的方式传给父组件使用,然后再插回来)

Bus

image.png ( p a r e n t s / parents/parents/children )

image.png

image.png $ref

image.png provide/inject

image.png

$listeners

image.png

.sync

image.png

v-model

image.png

solt

image.png