Vue 组件通信
作者: 图恩分类: 编程开发阅读: 657发布时间： 2020-05-12
data() {
return {
list: [
{
id: 'id-1',
title: 'title-1'
},
{
id: 'id-2',
title: 'title-2'
}
]
}
}
// List.vue 子组件
props: {
// 用来接收父组件传给子组件的数据
list: {
type: Array,
default() {
return []
}
}
}
子组件通过 vm.$emit(event, arg) 触发父组件事件
// App.vue 父组件
methods: {
addHandler(title) {
this.list.push({
id: `id-${Date.now()}`,
title
})
},
deleteHandler(id) {
this.list = this.list.filter(item => item.id !== id)
}
}
// List.vue 子组件
methods: {
deleteItem(id) {
// 调用父组件的事件
this.$emit('delete', id)
}
}
// Input.vue 子组件
methods: {
addTitle() {
// 调用父组件的事件
this.$emit('add', this.title)
this.title = ''
}
}
其他组件通过 vm.$on( event, fn ) 进行通信，实例一个 Vue 实例 event 作为媒介，在要相互通信的组件中引入 event
// event.js
import Vue from 'vue'
export default new Vue()
// Input.vue
methods: {
addTitle() {
// 调用父组件的事件
this.$emit('add', this.title)
// 调用自定义事件
event.$emit('onAddTitle', this.title)
this.title = ''
}
}
// List.vue
methods: {
addTitleHandler(title) {
console.log('on add title', title)
}
},
mounted() {
// 绑定自定义事件
event.$on('onAddTitle', this.addTitleHandler)
},
beforeDestroy() {
// 及时销毁，否则可能会造成内存泄漏
event.$off('onAddTitle', this.addTitleHandler)
},
运行结果
该章节的内容到这里就全部结束了，源码我已经发到了 GitHub Vue-Communication 上了，有需要的同学可自行下载
End of File
行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^
发表评论 (审核通过后显示评论)：