vue 自定义事件 兄弟组件间通信
发布时间
阅读量：
阅读量
首先 vue 实例有event对象 可以实现自定义事件，实现兄弟组件间通信。
项目架构中, event.js生成Vue实例对象, Input.vue和list.vue分别作为子组件存在；在index.vue中引入了两个相关子组件, 实现了Input与list之间的数据交互。
项目架构中, event.js生成Vue实例对象, Input.vue和list.vue分别作为子组件存在；在index.vue中引入了两个相关子组件, 实现了Input与list之间的数据交互。
看event.js
import vue from 'Vue'
export default new vue()
代码解读Input.vue
<template>
<div class="inputcontetn">
<input type="text" v-model="title" />
<button @click="add" class='red'>添加</button>
</div>
</template>
<script>
import event from "./event";
export default {
name: "input",
data() {
return {
title: ""
};
},
methods: {
add() {
this.$emit("add", this.title);
event.$emit('ontitle', this.title)
}
}
};
</script>
<style lang="less" >
@color:red;
.red{
background-color: @color;
}
</style>
代码解读list.vue
<template>
<div class="inptutcontent">
<ul>
<li v-for="item in list" :key="item.id">
{{item.name}}
<button @click="deleteItem(item.id)">删除</button>
</li>
</ul>
</div>
</template>
<script>
import event from "./event";
export default {
name: "list",
props: {
list: {
type: Array,
default() {
return [];
}
}
},
data() {
return {};
},
mounted(title){
//绑定自定义事件
event.$on('ontitle',this.onEvent)
},
methods: {
deleteItem(id) {
this.$emit("deteItem", id);
},
onEvent(title){
console.log(`自定义事件${title}`)
}
},
beforeDestroy(){
//及时销毁自定义事件 防止内存泄露
this.$off('ontitle',this.onEvent)
}
};
</script>
<style lang="less">
@color: red;
.body {
background: @color;
}
</style>
代码解读index.vue
<template>
<div class="content">
自定义事件
<input-com @add='handleadd'></input-com>
<list-com :list="list" @deteItem="handledelete"></list-com>
</div>
</template>
<script>
import InputCom from "./Input";
import listCom from "./list";
export default {
name: "index",
data() {
return {
list: [
{
id: "id-1",
name: "苹果"
},
{
id: "id-2",
name: "香蕉"
}
]
};
},
methods:{
handleadd(title){
this.list.push({id:`id-${Date.now()}`,name:title})
},
handledelete(id){
this.list=this.list.filter((item)=>{return item.id!==id})
// this.list = this.list.filter(item => item.id !== id)
}
},
components: {
"input-com": InputCom,
"list-com": listCom
}
};
</script>
<style lang="less" scoped>
</style>
代码解读添加的时候结果
实现了通信。。。
全部评论 (0)
还没有任何评论哟~