目录
一、引言
二、组件关系分类
三、组件通信的解决方案
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 发送消息 ②父中给子添加消息监听 ③ 父中实现处理函数
