Vue组件是Vue.js框架中的一种核心概念，它允许你将用户界面拆分成独立、可重用的模块。一个Vue组件封装了一个特定功能的代码块，包括HTML、CSS和JavaScript，使得代码更加模块化、可维护。 接下来就是组件通信的方法
vue组件的特性
首先我们先了解一下
- 模板（Template） ：定义了组件的HTML结构，通过Vue的模板语法进行书写。
- 脚本（Script） ：包含了组件的逻辑代码，使用Vue实例中的数据、方法等。
- 样式（Style） ：定义了组件的样式，可以使用普通的CSS，也可以使用预处理器如Sass或Less。
- 数据（Data） ：组件可以拥有自己的数据，这些数据可以在模板中使用，也可以在脚本中进行处理。
- 生命周期钩子（Lifecycle Hooks） ：Vue组件有一系列的生命周期钩子，允许你在组件生命周期的不同阶段执行代码，例如在组件创建、更新、销毁等阶段。
- 自定义事件（Custom Events） ：组件可以通过自定义事件来实现与父组件或其他子组件的通信。
父子组件通信Props
定义组件：在Vue.js中，你可以使用 Vue.component 方法或者在单文件组件（.vue文件）中定义组件。一个组件通常包括模板、脚本、和样式。
Props是Vue中用于从父组件向子组件传递数据的一种方式。
<!-- 父组件 -->
<template>
<div>
<child-component :message="parentMessage"></child-component>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: 'Hello from parent'
}
}
}
</script>
<!-- 子组件 -->
<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
props: {
message: String
}
}
</script>
在使用组件时候有三个步骤：
- 引入组件： 在父组件中引入都是 import 组件名 from 组件文件的路径
- 放组件的位置
<child-component:message="parentMessage"></child-component>或者<child-component :message="parentMessage"/> - 在components中声明一下组件名
- 父组件可以使用v-bind指令将需要传递的数据绑定到props上，子组件可以通过props选项来声明需要接收的props。
父子组件通信$emit
$emit 是 Vue.js 中用于触发自定义事件的方法。它在组件实例上调用，允许你传递自定义的事件名称以及可选的数据。父组件可以通过 v-on 监听这些自定义事件，并在事件被触发时执行相应的方法。
语法
this.$emit(eventName, [...args]);
eventName: 自定义事件的名称。args(可选): 传递给事件处理函数的参数，可以是任意数量的参数。
示例
-
子组件触发事件，父组件监听
在子组件中使用
$emit触发自定义事件：<!-- ChildComponent.vue --> <template> <button @click="sendMessage">Send Message</button> </template> <script> export default { methods: { sendMessage() { // 触发自定义事件，并传递消息数据 this.$emit('message-sent', 'Hello from child!'); } } } </script>在父组件中监听并处理这个自定义事件：
<!-- ParentComponent.vue --> <template> <div> <!-- 监听子组件的自定义事件 --> <child-component @message-sent="handleMessage"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { 'child-component': ChildComponent }, methods: { handleMessage(message) { console.log(message); // 输出：Hello from child! } } } </script> -
传递多个参数
$emit可以传递多个参数，这些参数会作为数组的形式传递给监听事件的处理函数：<!-- ChildComponent.vue --> <template> <button @click="sendData">Send Data</button> </template> <script> export default { methods: { sendData() { const data1 = 'Value 1'; const data2 = 'Value 2'; // 传递多个参数 this.$emit('data-sent', data1, data2); } } } </script><!-- ParentComponent.vue --> <template> <div> <child-component @data-sent="handleData"></child-component> </div> </template> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { 'child-component': ChildComponent }, methods: { handleData(data1, data2) { console.log(data1, data2); // 输出：Value 1 Value 2 } } } </script>
通过使用 $emit，你可以在 Vue 组件之间实现自定义事件的传递，从而实现更灵活的组件通信。
看完如果有所收获的话，欢迎👍点赞👍收藏👍以及评论区互动👍哦～另外如有错误❌或者遗漏的，欢迎评论指正！下一篇我们写一篇选项式的组件通信
