0. 背景
众所周知，组件之间的通信特别是父子组件之间传递数据，我们是通过props属性进行的。
其实，除了这种方式之外，我们还有别的替代方式，我们称之为依赖注入。
依赖注入使组件之间不必紧耦合在一起。
除此之外，我们还有类似事件总线(event bus)的方式来增强组件之间的通信，
这些我们稍后会一一介绍。
1. 一些关键概念
- 依赖注入(Dependency Injection)
依赖注入允许组件可以提供服务给任何它的子组件(后代组件)。
这些服务可以是值，对象或者函数。
依赖注入通过provide属性来注入服务。
- 事件总线(Event Bus)
事件总线建立在依赖注入功能的基础上。
它用于提供一种机制来发送和接收自定义事件。
事件通过$emit和$on方法来发送和接收事件。
2. 准备工作
2-1) 新建项目和基本设置
a. 新建项目
vue create productapp --default
b. 基本设置
package.json
"eslintConfig": {
...
"rules": {
"no-console": "off",
"no-unused-vars": "off"
},
...
}
c. 基本依赖
npm install bootstrap@4.0.0
3. 产品主页面
3-1) 新建产品显示页面
在src/components文件夹下，新建ProductDisplay.vue
<template>
<div>
<table class="table table-sm table-striped table-bordered">
<tr>
<th>ID</th><th>Name</th><th>Price</th><th></th>
</tr>
<tbody>
<tr v-for="p in products" v-bind:key="p.id">
<td>{{ p.id }}</td>
<td>{{ p.name }}</td>
<td>{{ p.price | currency }}</td>
<td>
<button class="btn btn-sm btn-primary" v-on:click="editProduct(p)">
Edit
</button>
</td>
</tr>
</tbody>
</table>
<div class="text-center">
<button class="btn btn-primary" v-on:click="createNew">
Create New
</button>
</div>
</div>
</template>
<script>
export default {
data: function () {
return {
products: [
{ id: 1, name: "Kayak", price: 275 },
{ id: 2, name: "Lifejacket", price: 48.95 },
{ id: 3, name: "Soccer Ball", price: 19.50 },
{ id: 4, name: "Corner Flags", price: 39.95 },
{ id: 5, name: "Stadium", price: 79500 }]
}
},
filters: {
currency(value) {
return `$${value.toFixed(2)}`;
}
},
methods: {
createNew() {
},
editProduct(product) {
}
}
}
</script>
3-2) 新建通用编辑组件
在src/components文件夹下，新建EditorField.vue
<template>
<div class="form-group">
<label>{{label}}</label>
<input v-model.number="value" class="form-control" />
</div>
</template>
<script>
export default {
props: ["label"],
data: function () {
return {
value: ""
}
}
}
</script>
代码解释:
该组件是一个通用的编辑组件，它由一个标签和一个文本框组成。
我们等下会在稍后的产品编辑组件中引用它。
3-3) 新建产品编辑组件
在src/components文件夹下，新建ProductEditor.vue
<template>
<div>
<editor-field label="ID" />
<editor-field label="Name" />
<editor-field label="Price" />
<div class="text-center">
<button class="btn btn-primary" v-on:click="save">
{{ editing ? "Save" : "Create" }}
</button>
<button class="btn btn-secondary" v-on:click="cancel">Cancel</button>
</div>
</div>
</template>
<script>
import EditorField from "./EditorField";
export default {
data: function () {
return {
editing: false,
product: {
id: 0,
name: "",
price: 0
}
}
},
components: { EditorField },
methods: {
startEdit(product) {
this.editing = true;
this.product = {
id: product.id,
name: product.name,
price: product.price
}
},
startCreate() {
this.editing = false;
this.product = {
id: 0,
name: "",
price: 0
};
},
save() {
// TODO - process edited or created product
console.log(`Edit Complete: ${JSON.stringify(this.product)}`);
this.startCreate();
},
cancel() {
this.product = {};
this.editing = false;
}
}
}
</script>
代码解释:
我们通过editor-field来调用之前定义的通用编辑组件。
4. 依赖注入
4-1) 定义服务
在App.vue中定义服务，如下:
<template>
<div class="container-fluid">
<div class="row">
<div class="col-8 m-3">
<product-display></product-display>
</div>
<div class="col m-3">
<product-editor></product-editor>
</div>
</div>
</div>
</template>
<script>
import ProductDisplay from "./components/ProductDisplay";
import ProductEditor from "./components/ProductEditor";
export default {
name: 'App',
components: { ProductDisplay, ProductEditor },
provide: function() {
return {
colors: {
bg: "bg-secondary",
text: "text-white"
}
}
}
}
</script>
代码解释:
通过provide属性提供一个服务，该服务暴露一个对象，提供背景和前景色。
4-2) 通过依赖注入消费服务
修改src/components文件夹下的EditorField.vue如下:
<template>
<div class="form-group">
<label>{{label}}</label>
<input v-model.number="value" class="form-control"
v-bind:class="[colors.bg, colors.text]" />
</div>
</template>
<script>
export default {
props: ["label"],
data: function () {
return {
value: ""
}
},
inject: ["colors"]
}
</script>
代码解释:
inject属性注入之前在父组件中通过provide定义的colors对象服务。
效果如下:
image.png
5. 事件总线
事件总线(Event Bus)实际上是通过依赖注入的方式传递一个Vue对象。
5-1) 添加总线
在src文件夹下的main.js添加事件总线，如下:
...
new Vue({
render: h => h(App),
provide: function () {
return {
eventBus: new Vue()
}
}
}).$mount('#app')
5-2) 通过总线发送事件
修改ProductDisplay.vue文件夹下的ProductDisplay.vue，如下:
...
<script>
export default {
...
methods: {
createNew() {
this.eventBus.$emit("create");
},
editProduct(product) {
this.eventBus.$emit("edit", product);
}
},
inject: ["eventBus"]
}
</script>
代码解释:
1. 注入之前在main.js中添加的eventBus的Vue对象来发送事件。
2. $emit方法发送事件，引号中是事件名，还可以带上额外参数。
3. 事件名在整个应用程序中必须保持唯一。
5-3) 通过总线接收事件
修改src/components文件夹下的ProductEditor.vue，如下:
...
<script>
...
export default {
...
methods: {
startEdit(product) {
this.editing = true;
this.product = {
id: product.id,
name: product.name,
price: product.price
}
},
startCreate() {
this.editing = false;
this.product = {
id: 0,
name: "",
price: 0
};
},
save() {
this.eventBus.$emit("complete", this.product);
this.startCreate();
console.log(`Edit Complete: ${JSON.stringify(this.product)}`);
},
...
},
inject: ["eventBus"],
created() {
this.eventBus.$on("create", this.startCreate);
this.eventBus.$on("edit", this.startEdit);
}
}
</script>
代码解释:
1. $on方法接收事件，第一个参数是事件名，第二个是调用的本地方法。
2. save方法中我们通过$emit方法继续向下级组件发送事件。
修改src/components文件夹下的ProductDisplay.vue，如下:
...
<script>
import Vue from "vue";
export default {
...
methods: {
...
processComplete(product) {
let index = this.products.findIndex(p => p.id == product.id);
if (index == -1) {
this.products.push(product);
} else {
Vue.set(this.products, index, product);
}
}
},
inject: ["eventBus"],
created() {
this.eventBus.$on("complete", this.processComplete);
}
}
</script>
代码解释:
a. $on方法接收完成事件，然后调用processComplete方法处理。
效果如下:
image.png
6. 本地总线
可以创建本地总线的方式只对应于某个组件的服务。
修改ProductEditor.vue，如下:
<script>
...
export default {
data: function () {
return {
...
localBus: new Vue()
}
},
...
methods: {
...
inject: ["eventBus"],
provide: function () {
return {
editingEventBus: this.localBus
}
},
created() {
this.eventBus.$on("create", this.startCreate);
this.eventBus.$on("edit", this.startEdit);
this.localBus.$on("change",
(change) => this.product[change.name] = change.value);
},
watch: {
product(newValue, oldValue) {
this.localBus.$emit("target", newValue);
}
}
}
}
</script>
修改src/components文件夹下的EditorField.vue，如下:
<script>
export default {
props: ["label", "editorFor"],
inject: {
...
editingEventBus: "editingEventBus"
},
watch: {
value(newValue) {
this.editingEventBus.$emit("change",
{ name: this.editorFor, value: this.value});
}
},
created() {
this.editingEventBus.$on("target",
(p) => this.value = p[this.editorFor]);
}
}
</script>
效果如下:
image.png
网友评论