Vue组件通信的方式
组件通信
组件可以说是一个具有独立功能的整体，但是当我们要将这些组件拼接在一起时，这些组件相互之间要建立联系，这个联系我们就称之为通信。
组件通信的方式
- 父子组件通信-----props
1.在父组件的模板中将数据用单项数据绑定的形式，绑定在子组件身上
<Son :money = "money"/>
2.在子组件的配置项中可以使用一个props配置项来接收这个数据，接收时，props的取值可以使一个数组
Vue.component('Son',{
template: '#son',
props: ['money']
})
3.在子组件模板中，接收到的属性可以像全局变量一样直接使用
<p> 父组件给的 {{ money }} </p>
<div id="app">
<Father>Father>
div>
<template id="father">
<div>
<h3> 这里是父组件 h3>
<hr>
Son>
div>
template>
<template id="son">
<div>
<h3> 这里是子组件 h3>
<p> 父组件给的{{ money }} p>
<p> {{ mask }} p>
div>
template>
Vue.component('Father',{
template: '#father',
data () {
return {
money:100,
mask: 12345
}
}
})
Vue.component('Son',{
template: '#son',
props: ['money','mask']
})
new Vue({
el: '#app'
})
- 子父组件通信-----自定义事件
- 在父组件的模板中，通过事件绑定的形式，绑定一个自定义事件在子组件身上
<Son @aa = "fn"/> //这边要注意： fn是要在父组件配置项methods中定义
- 在子组件的配置项methods中写一个事件处理程序，在事件处理程序中触发父组件绑定的自定义事件
Vue.component('Son',{
template: '#son',
data () {
return {
hongbao: 500
}
},
methods: {
giveFather () {
//如何进行父组件给子组件的自定义事件触发
this.$emit('give',this.hongbao)
}
}
})
- 将子组件定义的事件处理程序 giveFather,绑定在子组件的按钮身上
<template id="son">
<div>
<button @click = "giveFather"> give </button>
<h3> 这里是son组件 </h3>
</div>
</template>
<div id="app">
<Father>Father>
div>
<template id="father">
<div>
<h3> 这里是父组件 h3>
<p> 子组件给了{{ money }} p>
Son>
div>
template>
<template id="son">
<div>
<h3> 这里是子组件 h3>
Vue.component('Father',{
template: '#father',
data () {
return {
money: 0
}
},
methods: {
getMoney ( val ) {
this.money = val
}
}
})
Vue.component('Son',{
template: '#son',
data () {
return {
qian: 1000
}
},
methods: {
giveFather () {
this.$emit( 'give',this.qian )
}
}
})
new Vue({
el: '#app'
})
- 子父组件通信-----methods方法
<div id="app">
<Father>Father>
div>
<template id="father">
<div>
<h3> 这里是父组件 h3>
<p> num:{{ num }} p>
<hr>
Son>
div>
template>
<template id="son">
<div>
<h3> 这里是子组件 h3>
Vue.component('Father',{
template:'#father',
data () {
return {
num: 0
}
},
methods: {
add ( val ) {
this.num = val
}
}
})
Vue.component('Son',{
template:'#son',
data () {
return {
money: 500
}
},
props: ['add']
})
new Vue({
el: '#app'
})
- 非父子组件通信----$refs链
通过ref绑定组件后，我们发现在他们的共同父组件的 $refs里面可以找到子组件
//boy组件把数据给到father组件再给girl组件
<div id="app">
<Father>Father>
div>
<template id="father">
<div>
<h3>这里是fatherh3>
Vue.component('Father',{
template: '#father',
data () {
return {
a: 0
}
},
methods: {
look () {
this.a = this.$refs.boy.b
}
}
})
Vue.component('Boy',{
template: '#boy',
data () {
return {
b: 1000
}
}
})
Vue.component('Girl',{
template: '#girl',
data () {
return {
c: 0
}
},
methods: {
out () {
console.log( this )
console.log( this.$attrs )
}
}
})
new Vue({
el: '#app'
})
- 非父子组件通信-----bus总线
bus事件总线，我们是通过 o n 来 定 义 事 件 ， 通 过 on来定义事件，通过 on来定义事件，通过emit来触发事件
流程：
- 在其中一个组件的 挂载钩子函数 上 做事件的声明
Vue.component('Sma',{
template: '#small',
data () {
return {
flag: false
}
},
mounted () { //当前组件挂载结束，也就是我们可以在页面当中看到真实dom
// mounted这个钩子函数的触发条件是组件创建时会自动触发
// 事件的声明
var _this = this
bus.$on( 'aa',function () {
_this.flag = true
console.log( this )//这里是this指的是bus， 但是我们需要的this应该是Sma这个组件
})
}
})
- 在另一个组件中 通过 bus.$emit(‘aa’)来触发这个自定义事件
<div id="app">
<Bro>Bro>
<Sma>Sma>
div>
<template id="big">
<div>
<h3> 这里是哥哥组件 h3>
var bus = new Vue() // bus原型上有 $on $emit
Vue.component('Bro',{
template: '#big',
methods: {
hick () {
bus.$emit('aa')
}
}
})
Vue.component('Sma',{
template: '#small',
data () {
return {
flag: false
}
},
mounted () { //当前组件挂载结束，也就是我们可以在页面当中看到真实dom
// mounted这个钩子函数的触发条件是组件创建时会自动触发
// 事件的声明
var _this = this
bus.$on( 'aa',function () {
_this.flag = true
console.log( this )//这里是this指的是bus， 但是我们需要的this应该是Sma这个组件
})
}
})
new Vue({
el: '#app'
})