1. 父向子传值:v-bind 属性绑定
// 根组件
var vm = new Vue({
el: '#app',
data: {
pmsg: '父组件中内容',
_title: "动态绑定属性内容"
},
})
// 1. 组件内部通过props接收传递过来的值
Vue.component('menu - item ', {
props: ['title'], // 在props中使用驼峰形式,html模板中需要使用短横线的形式(因为dom元素的属性不区分大小写.和组件名字类似。字符串形式的模板中没有这个限制)
template: '<div>{{ title }}</div>'
})
// 2. 父组件通过属性将值传递给子组件
<menu-item title="来自父组件的数据"></menu-item>
<menu-item :title="_title"></menu-item>
2. 子向父传值:v-on 事件绑定
// 根组件
// ...
// methods: {
// event() {
// this.color = red
// }
// }
// ...
// 1.子组件通过自定义事件向父组件传递信息
<button @click='$emit("changeColor") '>扩大字体</button>
// 2.父组件监听子组件的事件
<menu-item @changeColor='event'></menu-item>
3. 兄弟之间共享数据:EventBus
$on 接收数据的那个组件
$emit 发送数据的那个组件
// 根组件
var vm = new Vue({
el: '#app',
data: {
pmsg: '父组件中内容'
},
methods: {
handle: function() {
// 销毁事件
hub.$off('event1');
hub.$off('event2')
}
}
})
// 提供事件中心
var hub = new Vue();
// 子组件1
Vue.component('childComponent1', {
data() {
return {
num: 0
}
},
// html挂载完成后执行。执行顺序:子组件——>父组件
mounted: function() {
// 监听事件1
hub.$on('event1', (val) => {
this.num += val
})
},
methods: {
increase() {
// 触发事件2
hub.$emit('event2', 1)
}
},
template: `
<div>
<button @click="increase"></button>
</div>
`
})
// 子组件2
Vue.component('childComponent2', {
data() {
return {
num: 0
}
},
// html挂载完成后执行。执行顺序:子组件——>父组件
mounted: function() {
// 监听事件2
hub.$on('event2', (val) => {
this.num += val
})
},
methods: {
decrease() {
// 触发事件1
hub.$emit('event1', 1)
}
},
template: `
<div>
<button @click="decrease"></button>
</div>
`
})
// 1. 单独的事件中心管理组件间的通信
var eventHub = new Vue()
// 2. 监听事件与销毁事件
eventHub.$on('add-todo', addTodo)
eventHub.$off('add-todo')
// 3. 触发事件
eventHub.$emit(‘add-todo', id)