- 父组件通过
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 上了,有需要的同学可自行下载
End of File
行文过程中出现错误或不妥之处在所难免,希望大家能够给予指正,以免误导更多人,最后,如果你觉得我的文章写的还不错,希望能够点一下喜欢和关注,为了我能早日成为简书优秀作者献上一发助攻吧,谢谢!^ ^
网友评论