vue组件通讯

vue 组件的通讯

父组件 => 子组件

<child1 :child1="count" ></child1>

:child

count

props

props:{
child1:{
type:Number, //规定了参数的类型
default:""   //规定参数的默认值
}
},

子组件传递给父组件

this.$emit('name1',params)

this.$emit('select')

<child1 :child1="count"  @select="addChild"></child1>

@select

methods:{
addChild(){
this.count += 1;
}
},

兄弟间通过 bus 传递

bus.js

import Vue from 'vue'
const Bus = new Vue()
export default Bus

import Bus from './../api/bus'

Bus.$emit('showOtherData1',this.data) //发送事件

Bus.$on('showOtherData1', function (val) {
console.log(val);
})

vuex

代码

<template>
<div>
{{count}}
<child1 :child1="count"  @select="addChild"></child1>
<child2 :child2="count"  @select="addChild"></child2>
</div>
</template>

<script>
import Child1 from './child1'
import Child2 from './child2'
export default {
data () {
return {
count:1
}
},
components:{
Child1,
Child2
},
methods:{
addChild(){
this.count += 1;
}
},
}
</script>

<template>
<div @click="add">
子组件1-----{{data}}----兄弟组件的值为{{otherdata}}
</div>
</template>

<script>
import Bus from './../api/bus'export default {
props:{
child1:{
type:Number,
default:""
}
},
data(){
return {
'data':'',
'otherdata':''
}
},
created(){
this.data = this.child1
this._showOtherData()
},
methods:{
add(){
this.data += 1;
this.$emit('select')
Bus.$emit('showOtherData1',this.data)
},
_showOtherData(){
var that = this
Bus.$on('showOtherData2', function (val) {
console.log(val);

that.otherdata = val
})
}
}
}
</script>

<template>
<div @click="add">
子组件2-----{{data}}----兄弟组件的值为{{otherdata}}
</div>
</template>

<script>
import Bus from './../api/bus'export default {
props:{
child2:{
type:Number,
default:""
}
},
data(){
return {
'data':'',
'otherdata':''
}
},
created(){
this.data = this.child2
this._showOtherData()
},
methods:{
add(){
this.data += 1;
this.$emit('select')
Bus.$emit('showOtherData2',this.data)
},
_showOtherData(){
var that = this;
Bus.$on('showOtherData1', function (val) {
console.log(val);
that.otherdata = val
})
}

}
}
</script>