简单入门：前端父子组件之间的通信

前端父子组件之间的通信

在Vue.js框架中，父子组件是组件化开发里的重要概念，它们体现了组件之间的层级关系与数据传递方式。

​ 父组件是一个包含了其他组件的容器组件。它可以通过模板语法引入子组件，并且能够向子组件传递数据、触发子组件的事件。父组件负责管理子组件的状态和行为，同时协调子组件与其他组件之间的交互。在代码结构上，父组件在模板中使用子组件的标签来引入子组件，并通过props属性向子组件传递数据。
子组件

​ 子组件是被父组件包含的组件，它依赖于父组件存在。子组件可以接收父组件传递的数据，并且可以向父组件发送事件。子组件通常专注于完成特定的功能，并且可以被多个父组件复用。在代码结构上，子组件通过defineProps来声明接收父组件传递的数据，通过defineEmits来声明可以触发的事件。

补充：如果想要实现子组件之间的通信，需要使用第三方组件pinia才行

实现简单的父子组件之间的数据通信

• 子组件：功能是接收父组件传递的消息，并且可以向父组件发送消息

<template>
  <div>
    <!-- 显示父组件传递过来的消息 -->
    <p>父组件传来的消息: {{ parentMessage }}</p>
    <!-- 点击按钮触发事件向父组件发送消息 -->
    <button @click="sendMessageToParent">向父组件发送消息</button>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue';

// 定义接收父组件传递的数据
const props = defineProps({
  parentMessage: {
    type: String,
    default: ''
  }
});

// 定义可以触发的事件
const emit = defineEmits(['childMessage']);

// 向父组件发送消息的方法
const sendMessageToParent = () => {
  emit('childMessage', '这是来自子组件的消息');
};
</script>

• 父组件：功能是向子组件传递消息，并且接收子组件发送的消息

<template>
  <div>
    <!-- 使用子组件并传递消息 -->
    <ChildComponent :parentMessage="message" @childMessage="handleChildMessage" />
    <!-- 显示子组件传来的消息 -->
    <p v-if="childMessage">子组件传来的消息: {{ childMessage }}</p>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

// 定义要传递给子组件的消息
const message = ref('这是来自父组件的消息');
// 定义变量用于接收子组件传来的消息
const childMessage = ref('');

// 处理子组件发送的事件
const handleChildMessage = (msg) => {
  childMessage.value = msg;
};
</script>

---