vue组件传值:
1.父传子:
在父组件的子组件标签上通过v-bind绑定要传递的数据,然后在子组件内部通过props接收
<select-list :dataList="dataArr" @parentReceive="changeVal"/>
props: ['dataList']
2.子传父:
在子组件中定义一个方法,然后在方法里面通过this.
e
m
i
t
进
行
传
递
(
emit进行传递(
emit进行传递(emit有两个参数(自定义事件名称,要传递的数据)):
selectVal (val) {
this.$emit('parentReceive', val)
}
在父组件的子组件标签上通过@自定义事件名称监听,然后通过回调函数去处理响应的逻辑:
<template>
<select-list :dataList="dataArr" @parentReceive="changeVal"/>
</template>
<script>
changeVal (val) {
console.log(`我是子组件传递过来的数据${val}`)
}
</script>
3.中央通讯(跨组件通信):
在要传递数据的组件通过$emit(自定义事件名称,要传递的数据):
import bus from '../../main'
selectVal (val) {
bus.$emit('reveive', val)
}
在目标组件通过
o
n
进
行
监
听
接
收
on进行监听接收
on进行监听接收on(‘自定义事件名称’, 回调函数):
import bus from '../../main'
bus.$on('reveive', val => {
console.log(val)
this.value = val
})
$emit 和 $on都要挂载到Vue空实例上,而这个空实例要全局使用因此需要在main.js创建:
let bus = new Vue()
export default bus