组件允许我们将 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>
三、运行结果
图一 父组件传递信息给子组件
图二 子组件触发事件将消息传递给父组件
总结
以上就是今天要讲的内容,本文仅仅讲述了父子组件的通信,下一篇讲述兄弟组件的通信