目录

一、引言

二、组件关系分类

三、组件通信的解决方案

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