Vue 组件通信

Unsplash 父组件通过 props 给子组件传值 // App.vue 父组件 data() { return { list: [ { id: 'id-1', title: 'title-1' }, { id: 'id-2', title: 'title-2' } ] } } // List.vue 子组件

• {{item.title}} 删除

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 子组件

• {{item.title}} 删除

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 行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^

本文章由javascript技术分享原创和收集