目录

一、引言

二、组件关系分类

三、组件通信的解决方案

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 发送消息 ②父中给子添加消息监听 ③ 父中实现处理函数