项目开发中经常出现父子组件之间的嵌套关系,同时父子组件或者不同之间之间会出现一些数据传输需求;如编辑品牌数据,需要在弹窗中完成品牌数据的编辑操作;弹窗做为子组件,需要页面组件/父组件将需要编辑的数据传输给子组件进行操作;所以组件之间的数据传递是Vue
项目中非常重要的一种操作方式
1,父子组件传值
解决方案:自定义属性
操作语法:props
选项,自定义属性定义和传递
① 声明一个通过自定义属性接受数据的子组件Child1.vue
,需要注意~自定义属性接受并使用父组件传递的数据,但是不能直接修改父组件传递的变量数据,称这种规范为 单向数据流!
<template>
<div>
<p>来自父组件的数据:{{ mfp }}</p>
</div>
</template>
<script>
export default {
// 自定义属性,当前组件通过mfp,可以接受来自父组件的数据
props: ['mfp']
}
</script>
② 父组件Home.vue
中,操作子组件
<template>
<div>
<!-- 使用子组件 -->
<Child1 :mfp="msgFromParent"/>
</div>
</template>
<script>
// 引入子组件
import Child1 from './child/Child1.vue'
export default {
data() {
return {
msgFromParent: '父组件数据'
}
},
components: {
// 注册子组件
Child1
}
}
</script>
2,子父组件传值
解决方案:自定义事件
操作语法:vm.$emit(自定义事件, 传递数据)
① 定义一个子组件,可以发送自定义事件,通过事件传递数据
<template>
<div>
<p>当前组件数据:{{ msgFromChild }}</p>
<button @click="sendData">发送数据给父组件</button>
</div>
</template>
<script>
export default {
data() {
return {
msgFromChild: 'Child数据'
}
},
methods: {
sendData() {
// 触发一个自定义事件
this.$emit('devent', this.msgFromChild)
}
}
}
</script>
② 父组件中使用子组件,监听子组件的事件,接受子组件中传递的数据
<template>
<div>
<p>子组件的数据:{{ mfc }}</p>
<Child1 @devent="getData"/>
</div>
</template>
<script>
// 引入子组件
import Child1 from './child/Child1.vue'
export default {
data() {
return {
mfc: '等待接受数据'
}
},
methods: {
getData(dat) {
// 事件中接受子组件传递的数据
this.mfc = dat
}
},
components: {
Child1
}
}
</script>
3,组件之间传值
如果两个组件之间,父子嵌套关系比较复杂的情况下,通过父子/子父组件 传值的方式比较繁琐,我们可以通过自定义事件中心的方式完成数据的传递
① 创建一个事件中心
import Vue from "vue"
const vm = new Vue()
// 导出一个空白对象
export default vm
② 定义一个组件准备接受数据
<template>
<div>
<p>接受其他组件的数据:{{ mfo }}</p>
</div>
</template>
<script>
// 导入事件中心
import vm from '../../utils/events'
export default {
data() {
return {
mfo: '等待接受其他组件的数据'
}
},
created() {
// 事件中心监听其他组件是否发送了数据
vm.$on('oevent', dat => {
// 将数据保存起来
this.mfo = dat
})
}
}
</script>
③ 其他组件通过事件中心发送数据
<template>
<button @click="sendDataToOther">
发送数据给其他组件
</button>
</template>
<script>
import vm from '../../utils/events'
export default {
data() {
return {
msgFromChild: 'Child1数据'
}
},
methods: {
sendDataToOther() {
// 事件中心通过自定义事件 发送数据
vm.$emit('oevent', this.msgFromChild)
}
}
}
</script>