第二十章 Vue组件通信之父子通信
目录
一、引言
二、组件关系分类
三、组件通信的解决方案
3.1. 父子通信流程图
3.2. 父组件通过 props 将数据传递给子组件
3.2.1. 代码App.vue
3.2.2. 代码MySon.vue
3.3. 子组件利用 $emit 通知父组件修改更新
编辑3.3.1. 代码App.vue
3.3.2. 代码MySon.vue
3.3.3. 运行效果
四、总结
一、引言
在使用Vue框架的日常开发中，我们会遇到各种场景需求涉及到到组件通信, 也就是指组件与组件之间的数据传递。
在Vue中组件之间会存在多种不同的组件关系，因此组件通信的方案也有所不同。
二、组件关系分类
1. 父子关系
2. 非父子关系
三、组件通信的解决方案
3.1. 父子通信流程图
3.2. 父组件通过 props 将数据传递给子组件
3.2.1. 代码App.vue
<template>
<div class="App" style="border:3px solid #000;margin:10px">
我是App组件
<!-- 给组件标签以添加属性的方式去传值 -->
<MySon :target="myTarget"></MySon>
</div>
</template>
<script>
import MySon from './components/MySon.vue'
export default {
data () {
return {
myTarget: '不畏将来，不念过往，把握当下。人生是一场漫长的修行，持续拼搏努力，未来一定会好的！'
}
},
components: {
MySon: MySon
}
}
</script>
<style>
</style>3.2.2. 代码MySon.vue
<template>
<div class="son" style="border:3px solid #000;margin:10px">
我是MySon组件
{{ target }}
</div>
</template>
<script>
export default {
// 通过props进行接收
props: ['target']
}
</script>
<style>
</style>3.3. 子组件利用 $emit 通知父组件修改更新
3.3.1. 代码App.vue
<template>
<div class="App" style="border:3px solid #000;margin:10px">
我是App组件
<!-- :target="myTarget" 给组件标签以添加属性的方式去传值 -->
<!-- 父组件对消息进行监听 -->
<MySon :target="myTarget" @changeTarget="handleChange"></MySon>
</div>
</template>
<script>
import MySon from './components/MySon.vue'
export default {
data () {
return {
myTarget: '不畏将来，不念过往，把握当下。人生是一场漫长的修行，持续拼搏努力，未来一定会好的！'
}
},
methods: {
// 提供处理函数和逻辑
handleChange (newTarget) {
console.log(newTarget)
this.myTarget = newTarget
}
},
components: {
MySon: MySon
}
}
</script>
<style>
</style>3.3.2. 代码MySon.vue
<template>
<div class="son" style="border:3px solid #000;margin:10px">
我是MySon组件
{{ target }}
<button @click="changeFn">修改我的目标</button>
</div>
</template>
<script>
export default {
// 通过props进行接收
props: ['target'],
methods: {
changeFn () {
// 1. 通过$emit，向父组件发送消息通知
this.$emit('changeTarget', '学海无涯，把握每分每秒')
}
}
}
</script>
<style>
</style>3.3.3. 运行效果
四、总结
1. 两种组件关系分类和对应的组件通信方案
父子关系 → props & $emit
非父子关系 → provide & inject 或 eventbus
通用方案 → vuex
2. 父子通信方案的核心流程
2.1 父传子props：
① 父中给子添加属性传值 ② 子props 接收 ③ 子组件使用
2.2 子传父$emit：
① 子$emit 发送消息 ②父中给子添加消息监听 ③ 父中实现处理函数