二.组件传值的八种方式
1.父传子:
首先在使用子组件的标签上 通过自定义属性传递变量 在子组件中 通过 props 接受
在接收的时候有两种接收方式 数组形式 和 对象形式 对象形式可以规定传来的变量的数据类型(type) 默认值(default)以及是否必填(required)
2.子传父:
首先在使用子组件的标签上定义一个自定义事件 在子组件里通过 this.
e
m
i
t
去
调
用
这
个
自
定
义
事
件
emit 去调用这个自定义事件
emit去调用这个自定义事件emit 方法的第一个参数是自定义事件的名字 第二个参数是就是子组件要传递给父组件的变量 最后在父组件接收使用就可以了
3.兄弟组件:
利用中央事件总线 eventbus在 main.js 中 把一个空的 vue 实例挂载在 vue 的原型上起名叫
b
u
s
传
数
据
的
时
候
用
t
h
i
s
.
bus传数据的时候用this.
bus传数据的时候用this.bus.
e
m
i
t
传
在
要
接
受
数
据
的
子
组
件
在
c
r
e
a
t
e
d
钩
子
函
数
中
用
emit传 在要接受数据的子组件 在 created钩子函数中 用
emit传在要接受数据的子组件在created钩子函数中用on 方法接收
4. 利用 vuex 进行组件通信 把公共的数据存在 vuex 里就可以实现组件之间都能使用这个数据了
5. 其实 v-model 也能实现组件通信 因为 v-model 就是 :value 和 @input 事件的合写 如果在一个子组件上使用 v-model 也能实现父子组件之间的通信
6.
a
t
t
r
+
attr+
attr+listener:
如果父组件 A 下面有子组件 B 子组件 B 下面又有子组件 C 如果 a 组件的变量和方法想要传给组件 C 的时候 就用到这个方法 适用于多级组件传值
在 B 组件中给 C 组件绑定 v-bind=“
a
t
t
r
s
"
v
−
o
n
=
"
attrs" v-on="
attrs"v−on="listeners” 然后在 C 组件中就可以直接使用 a 传来的属性和方法了
(简单来说:
a
t
t
r
s
与
attrs与
attrs与listeners 是两个对象,
a
t
t
r
s
里
存
放
的
是
父
组
件
中
绑
定
的
非
P
r
o
p
s
属
性
,
attrs 里存放的是父组件中绑定的非 Props 属性,
attrs里存放的是父组件中绑定的非Props属性,listeners 里存放的是父组件中绑定的非原生事件。)
8. provide 和 inject
父组件通过通过 provide 提供变量 子组件中通过 inject 注入变量,不论嵌套了几层子组件 都能通过 inject 来调用 provide 的数据
这种写法传的数据是不响应的
9.
p
a
r
e
n
t
和
parent和
parent和children
在子组件内可以直接通过
p
a
r
e
n
t
对
父
组
件
进
行
操
作
,
在
父
组
件
内
可
以
直
接
通
过
parent对父组件进行操作,在父组件内可以直接通过
parent对父组件进行操作,在父组件内可以直接通过children 对子组件进行操作
在父组件调用子组件时候要加下标也就是$children 是一个数组 因为可以有很多个子组件
10. 也能用本地存储 来 完成组件通信