- 父 子组件的数据传递
- 子父组件的数据传递
- 兄弟组件之间的数据传递
- 深层嵌套,祖先组件与子孙组件的数据传递
1.父子组件数据传递,子组件接收使用props
// 父组件传递参数
<cases-list :list="list" :title="案例列表"></cases-list>
// 传递静态数据时,即字符串时,可以不用v-bind绑定
<cases-list :list="list" title="案例列表"></cases-list>
// 子组件接收参数
props: {
list: {
type: Array,
default: []
},
title: {
type: String,
default: ''
}
}
2.子父组件的数据传递,子组件使用$emit传参,父组件使用函数接收
// 子组件传递参数
clickPraiseBtn(isPraise) {
// isPraise 为点赞的状态
this.$emit('click-praise', isPraise)
}
// 父组件接收参数
<cases-list :list="list" :title="案例列表" @click-praise="clickPraiseBtn"></cases-list>
clickPraiseBtn(isPraise) {
// 函数里面接收子组件传递的参数,可以传多个
this.isPraise = isPraise
}
3.兄弟组件之间的数据传递
// url传参,只适合页面跳转使用
this.$router.push({
path: '/b',
query: {
id: 1,
name: '果果'
}
})
// eventBus传递
var eventHub = new Vue()
// 在组件中,可以使用 $emit,$on,$off 分别来分发、监听、取消监听事件
// a
addTodo: function () {
eventHub.$emit('add-todo', { text: this.newTodoText })
this.newTodoText = ''
}
// b
created: function () {
eventHub.$on('add-todo', this.addTodo)
}
// 最好在组件销毁前, 清除事件监听
beforeDestroy: function () {
eventHub.$off('add-todo', this.addTodo)
}
// 复杂的项目最好使用vuex管理(推荐)
const store = new Vuex.Store({
state: {
count: 0
},
getters: {}, // 计算属性
mutations: {
increment (state) {
state.count++
}
}, // 同步操作
actions: {} // 提交mutations,异步操作
})
4.祖先组件与子孙组件的数据传递,使用provide/inject
// 父级组件提供 'foo'
var Provider = {
provide: {
foo: 'bar'
},
// ...
}
// 子组件注入 'foo'
var Child = {
inject: ['foo'],
created () {
console.log(this.foo) // => "bar"
}
// ...
}