父传子
方式一:
传值父组件: :name = “name”
接收子组件: props[‘name’]
方式二:
传值父组件: mounted中 this.$refs.ref.value = *
接收子组件: data中 value = " "
子传父
方式一:
传值子组件: this.$emit(‘event’,value)
接收父组件: @event()
方式二:
传值子组件: mounted中 this.$parent.value = ’ ’
接收父组件: data中 value = " "
注:使用此方式传值,也可以用
e
m
i
t
传
事
件
,
父
组
件
使
用
emit传事件,父组件使用
emit传事件,父组件使用on接收(监听自定义函数)
传值子组件: mounted中 this.
p
a
r
e
n
t
.
parent.
parent.emit (‘event’)
接收父组件: mounted中 this.$on(‘event’ , function() )
兄弟组件传值
新建一个空的Vue实例对象
传值组件: 引入bus.js文件
bus.
e
m
i
t
(
′
e
v
e
n
t
′
,
v
a
l
u
e
)
接
收
组
件
:
引
入
b
u
s
文
件
b
u
s
.
emit('event', value) 接收组件: 引入bus文件 bus.
emit(′event′,value)接收组件:引入bus文件bus.on(‘event’, function())
跨级组件通信
传值组件: provide() {
return {
key: value
}
}
接收组件: inject[‘key’] // key可使用{{}}获取