props
给子组件传值// App.vue 父组件
<List :list="list" />
data() {
return {
list: [
{
id: 'id-1',
title: 'title-1'
},
{
id: 'id-2',
title: 'title-2'
}
]
}
}
// List.vue 子组件
<ul>
<li v-for="item in list" :key="item.id">
{{item.title}}
<button>删除</button>
</li>
</ul>
props: {
// 用来接收父组件传给子组件的数据
list: {
type: Array,
default() {
return []
}
}
}
vm.$emit(event, arg)
触发父组件事件// App.vue 父组件
<Input @add="addHandler"/>
<List :list="list" @delete="deleteHandler"/>
methods: {
addHandler(title) {
this.list.push({
id: `id-${Date.now()}`,
title
})
},
deleteHandler(id) {
this.list = this.list.filter(item => item.id !== id)
}
}
// List.vue 子组件
<ul>
<li v-for="item in list" :key="item.id">
{{item.title}}
<button @click="deleteItem(item.id)">删除</button>
</li>
</ul>
methods: {
deleteItem(id) {
// 调用父组件的事件
this.$emit('delete', id)
}
}
// Input.vue 子组件
<input type="text" v-model="title"/>
<button @click="addTitle">添加</button>
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 上了,有需要的同学可自行下载