vue3 父子组件通信

一、定义组件

二、引入组件

三、运行结果

总结

---

组件允许我们将 UI 划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。

每一个页面都可以分割成一个个独立的组件，如下图所示

一、定义组件

当使用构建步骤时，我们一般会将 Vue 组件定义在一个单独的 .vue 文件中，这被叫做单文件组件 (简称 SFC)：

 通过defineProps 来接收父组件向子组件传递的内容；

 通过 defineEmits 宏来声明需要抛出的事件

<template>
  <h2>{{ title }}</h2>
  <el-button type="primary" @click="replyMessage">回复消息</el-button>
</template>
<script setup>
defineProps({
  title: {
    type: String,
    default: "",
  },
});

const emit = defineEmits(["sendMsg"]);

const replyMessage = () => {
  emit("sendMsg", "我很好,谢谢关心");
};
</script>

二、引入组件

父组件：

通过 绑定属性 ：title 向子组件传递信息

通过 @sendMsg 获取 子组件触发的事件

<template>
  <child-message :title="state.title" @sendMsg="getMessage" />
  <h1>{{ state.childMsg }}</h1>
</template>
<script setup>
import childMessage from "./components/child.vue";
import { reactive, ref } from "vue";

const state = reactive({
  title: "父组件发送的消息是：你好吗？",
  childMsg: "",
});

// 获取消息
const getMessage = (val) => {
  state.childMsg = val;
};
</script>

三、运行结果

图一   父组件传递信息给子组件

图二  子组件触发事件将消息传递给父组件

总结

以上就是今天要讲的内容，本文仅仅讲述了父子组件的通信，下一篇讲述兄弟组件的通信