IT评测·应用市场-qidao123.com技术社区

标题: Vue入门级教程六：组件间通信与插槽 [打印本页]

作者: 张国伟 时间: 2024-12-6 23:10
标题: Vue入门级教程六：组件间通信与插槽
在前面的Vue入门级教程中，我们已经学习了Vue的基础知识，包罗模板语法、指令、计算属性、侦听器以及组件的创建和使用。本日，我们将深入探究Vue组件间通信的方法以及插槽（slot）的使用，这两个主题对于构建复杂的Vue应用程序至关紧张。
一、组件间通信

（一）父组件向子组件传递数据（Props）

基本用法
在Vue中，父组件可以通过props向子组件传递数据。起首，在父组件中界说要传递的数据，然后在子组件中通过props选项接收。例如，我们有一个父组件ParentComponent和一个子组件ChildComponent。
在父组件的模板中：

<template>
<div>
<ChildComponent :message="parentMessage" />
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
parentMessage: '这是父组件传递给子组件的消息'
};
}
};
</script>

复制代码

在子组件中：

<template>
<div>
<p>{{ message }}</p>
</div>
</template>
<script>
export default {
props: {
message: String
}
};
</script>

复制代码

这样，父组件中的parentMessage数据就传递到了子组件中，并可以在子组件的模板中使用。

动态绑定Props
props的值不仅可以是静态的，还可以是动态绑定的。例如，父组件中的数据可能会根据用户的利用或其他因素发生变革，我们希望子组件能够实时接收更新后的数值。
在父组件的模板中：

<template>
<div>
<input v-model="parentMessage" />
<ChildComponent :message="parentMessage" />
</div>
</template>

复制代码

当用户在输入框中输入内容时，子组件会立刻更新显示的消息。
（二）子组件向父组件传递数据（自界说变乱）

使用$emit触发变乱
子组件可以通过$emit方法触发自界说变乱，向父组件传递数据。在子组件中，当某个利用发生时（例如点击按钮），我们可以触发一个自界说变乱，并传递相关数据。
在子组件的模板中：

<template>
<div>
<button @click="sendDataToParent">向父组件传递数据</button>
</div>
</template>
<script>
export default {
methods: {
sendDataToParent() {
const data = '这是子组件传递给父组件的数据';
this.$emit('childData', data);
}
}
};
</script>

复制代码

在父组件中，通过v-on指令监听子组件触发的变乱，并在变乱处理函数中接收数据。
在父组件的模板中：

<template>
<div>
<ChildComponent @childData="handleChildData" />
<p>{{ receivedData }}</p>
</div>
</template>
<script>
import ChildComponent from './ChildComponent.vue';
export default {
components: {
ChildComponent
},
data() {
return {
receivedData: ''
};
},
methods: {
handleChildData(data) {
this.receivedData = data;
}
}
};
</script>

复制代码

当子组件中的按钮被点击时，父组件会接收到子组件传递的数据，并更新receivedData的值，从而在页面上显示出来。
（三）兄弟组件通信（通过共同的父组件）

父组件作为中介
当两个兄弟组件必要通信时，可以通过它们共同的父组件作为中介来实现。兄弟组件A可以通过触发父组件中的自界说变乱，将数据传递给父组件，然后父组件再将数据传递给兄弟组件B。
例如，我们有兄弟组件BrotherComponentA和BrotherComponentB，以及它们的父组件ParentComponent。
在BrotherComponentA中：

<template>
<div>
<button @click="sendDataToParent">向兄弟组件传递数据</button>
</div>
</template>
<script>
export default {
methods: {
sendDataToParent() {
const data = '这是兄弟组件A传递的数据';
this.$emit('sendData', data);
}
}
};
</script>

复制代码

在ParentComponent中：

<template>
<div>
<BrotherComponentA @sendData="handleDataFromA" />
<BrotherComponentB :dataFromA="dataForB" />
</div>
</template>
<script>
import BrotherComponentA from './BrotherComponentA.vue';
import BrotherComponentB from './BrotherComponentB.vue';
export default {
components: {
BrotherComponentA,
BrotherComponentB
},
data() {
return {
dataForB: ''
};
},
methods: {
handleDataFromA(data) {
this.dataForB = data;
}
}
};
</script>

复制代码

在BrotherComponentB中：

<template>
<div>
<p>{{ dataFromA }}</p>
</div>
</template>
<script>
export default {
props: {
dataFromA: String
}
};
</script>

复制代码

这样，兄弟组件A的数据就可以通过父组件传递给兄弟组件B。
（四）非父子、非兄弟组件通信（使用变乱总线或Vuex）

变乱总线（Event Bus）
对于非父子、非兄弟组件之间的通信，可以使用变乱总线。变乱总线是一个空的Vue实例，它可以作为一个中央变乱中心，任何组件都可以在这个变乱总线上触发和监听变乱。
起首，创建一个变乱总线文件（例如event-bus.js）：

import Vue from 'vue';
export const eventBus = new Vue();

复制代码

在组件A中，触发变乱：

<template>
<div>
<button @click="sendDataToOtherComponent">向其他组件传递数据</button>
</div>
</template>
<script>
import { eventBus } from '../event-bus.js';
export default {
methods: {
sendDataToOtherComponent() {
const data = '这是组件A传递的数据';
eventBus.$emit('dataFromA', data);
}
}
};
</script>

复制代码

在组件B中，监听变乱：

<template>
<div>
<p>{{ receivedData }}</p>
</div>
</template>
<script>
import { eventBus } from '../event-bus.js';
export default {
data() {
return {
receivedData: ''
};
},
mounted() {
eventBus.$on('dataFromA', (data) => {
this.receivedData = data;
});
}
};
</script>

复制代码

使用变乱总线可以方便地实现非父子、非兄弟组件之间的通信，但在大型项目中，假如使用不妥，可能会导致变乱管理混乱，因此必要谨慎使用。

Vuex（状态管理模式）
Vuex是Vue.js的官方状态管理库，它提供了一种集中式管理应用程序状态的方式，适用于大型复杂项目中的组件间通信。关于Vuex的详细先容和使用方法将在后续教程中深入讲解。

二、插槽（slot）

基本插槽用法
插槽用于在父组件中向子组件传递内容。在子组件中，使用<slot>标签来界说插槽的位置，然后在父组件使用子组件时，可以在子组件标签内部插入内容，这些内容将会替换子组件中的<slot>标签。
例如，我们有一个子组件AlertComponent，它用于显示一个提示框。
在子组件的模板中：

<template>
<div class="alert">
<slot></slot>
</div>
</template>
<style scoped>
.alert {
border: 1px solid #ccc;
padding: 10px;
background-color: #f9f9f9;
}
</style>

复制代码

在父组件中：

<template>
<div>
<AlertComponent>这是提示框的内容</AlertComponent>
</div>
</template>

复制代码

这样，父组件中的“这是提示框的内容”就会显示在子组件的提示框内。

具名插槽（Named Slots）
有时候，子组件可能必要多个插槽，并且希望父组件能够明白指定内容插入到哪个插槽中。这时候就可以使用具名插槽。
在子组件的模板中，为插槽添加name属性来界说具名插槽：

<template>
<div class="card">
<header><slot name="header"></slot></header>
<main><slot name="main"></slot></main>
<footer><slot name="footer"></slot></footer>
</div>
</template>

复制代码

在父组件中，使用v-slot指令（缩写为#）来指定内容插入到哪个具名插槽中：

<template>
<div>
<CardComponent>
<template v-slot:header>
<h2>卡片标题</h2>
</template>
<template #main>
<p>卡片正文内容</p>
</template>
<template v-slot:footer>
<p>卡片底部信息</p>
</template>
</CardComponent>
</div>
</template>

复制代码

这样，父组件中的内容就会分别插入到子组件对应的具名插槽中。

作用域插槽（Scoped Slots）
作用域插槽允许子组件向父组件传递数据，父组件可以根据这些数据来渲染插槽内容。在子组件中，在<slot>标签上使用v-bind绑定数据，然后在父组件中通过slot-scope（在Vue 2.6.0+中已废弃，使用v-slot的新语法）或v-slot来接收数据并使用。
在子组件的模板中：

<template>
<div class="list">
<ul>
<li v-for="item in items" :key="item.id">
<slot :item="item"></slot>
</li>
</ul>
</div>
</template>
<script>
export default {
data() {
return {
items: [
{ id: 1, name: '苹果', price: 5 },
{ id: 2, name: '香蕉', price: 3 },
{ id: 3, name: '橙子', price: 4 }
]
};
}
};
</script>

复制代码

在父组件中：

<template>
<div>
<ItemListComponent>
<template v-slot="{ item }">
<p>{{ item.name }} - 价格: {{ item.price }}</p>
</template>
</ItemListComponent>
</div>
</template>

复制代码

父组件可以根据子组件传递过来的item数据来渲染每个列表项的内容。
通过学习组件间通信和插槽的使用，我们可以构建更加灵活和复杂的Vue应用程序。在现实开发中，根据不同的场景选择合适的通信方式和插槽用法，能够进步代码的可读性、可维护性和复用性。希望本教程对你在Vue的学习过程中有所帮助，后续我们将继续深入学习Vue的其他高级特性。假如你有任何问题或发起，接待在批评区留言。

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)