Vue中父子组件通信

Vue.js 是一个用于构建用户界面的渐进式框架。Vue 的核心库关注的是视图层，易于拾取的同时也便于与其他库或已有项目整合。在 Vue 中，组件化开发是其一大特色，组件可以被重用，并且通过组件之间的通信来实现复杂的功能。本文将详细介绍 Vue 中父子组件通信的基本概念、方法和最佳实践，并通过具体的代码示例来帮助读者更好地理解和应用这些知识。

组件通信概述

在 Vue 中，组件通信主要有三种情况：

1. 父子通信：这是最常见的通信方式，通常通过 props 和自定义事件来实现。
2. 非父子通信：跨越多个层级的组件间通信，可以通过全局事件总线、Vuex 状态管理等方式来实现。
3. 跨域通信：不同源的组件间通信，可以通过 MessageChannel、WebSocket 等技术实现。

本文重点讨论第一种情况——父子组件通信。

子组件向父组件通信

子组件向父组件传递信息通常是通过自定义事件来完成的。子组件通过 $emit 方法发射一个事件，父组件通过监听该事件来获取信息。

示例一：子组件向父组件传递数据

<!-- 子组件 Child.vue -->
<template>
  <button @click="sendData">发送数据</button>
</template>

<script>
export default {
  methods: {
    sendData() {
      this.$emit('data-sent', '来自子组件的数据');
    }
  }
}
</script>

<!-- 父组件 Parent.vue -->
<template>
  <div>
    <child @data-sent="handleDataSent"/>
    <p>{
  
  { receivedData }}</p>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      receivedData: ''
    };
  },
  methods: {
    handleDataSent(data) {
      this.receivedData = data;
    }
  }
}
</script>

父组件向子组件通信

父组件向子组件传递数据是通过 props 来实现的。父组件将数据通过属性传递给子组件，子组件通过 props 接收这些数据。

示例二：父组件向子组件传递数据

<!-- 父组件 Parent.vue -->
<template>
  <div>
    <child :msg="parentMsg"/>
  </div>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  },
  data() {
    return {
      parentMsg: '来自父组件的消息'
    };
  }
}
</script>

<!-- 子组件