vue组件中的通信方式一共有3种,它们分别是:
1,父子组件通信
2,子父组件通信
3,兄弟组件通信
一,父子组件通信
//这是父组件 里面有一个num,把num传给子组件
<template>
<div id="app">
<chlidren :num="num"/>
</div>
</template>
<script>
import chlidren from './components/chlidren'
export default {
components:{
chlidren
},
name: 'App',
data(){
return{
num:1
}
},
}
</script>
<style scoped>
</style>
//子组件中用props接受即可
<template>
<div>
<p>{{num}}</p>
</div>
</template>
<script>
export default {
props:['num']
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
二,子父组件通信
<!--子组件中添加了加和减按钮,点击的时候,实现num加1或减1,这里使用的是事件$emit-->
<!--但$emit中的事件名要和父组件中的保持一至,比如这里的addnu,相应的父组件中也要有它-->
<template>
<div>
<button class="button" @click="addnumber">+</button>
<button class="button" @click="cennumber">-</button>
<p>{{num}}</p>
</div>
</template>
<script>
export default {
props:['num'],
name: 'HelloWorld',
methods:{
addnumber(){
this.$emit("addnu");
},
cennumber(){
this.$emit("cennu")
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
<!--这里的addnu和cennu要和子组件要对应,事件名要和methods中的事件名相对应即可-->
<template>
<div id="app">
<chlidren :num="num" @addnu="addnumber" @cennu="cennumber"/>
</div>
</template>
<script>
import chlidren from './components/chlidren'
export default {
components:{
chlidren
},
name: 'App',
data(){
return{
num:1
}
},
methods:{
addnumber(){
this.num++
},
cennumber(){
this.num--
}
}
}
</script>
<style scope>
</style>
三,兄弟组件通信
1,在router中创建一个event.js文件
<!--在父组件中引入这两个兄弟组件分别是module和border,命名很随便-->
<template>
<div id="app">
<module/>
<border/>
</div>
</template>
<script>
import module from './components/module'
import border from './components/border'
export default {
components:{
module,
border
},
name: 'App'
}
</script>
<style scope>
</style>
现在要从组件A module中传递数据到组件B border中
组件A
<!--还是使用$emit-->
<template>
<div>
<button @click="abtn">A按钮</button>
</div>
</template>
<script>
import eventVue from '../router/event'
export default {
name: 'app',
data () {
return {
'msg':"我是组件A"
}
},
methods:{
abtn:function(){
eventVue.$emit("newbtn",this.msg) //1$emit这个方法会触发一个事件
}
}
}
</script>
组件B
<template>
<div>
<div>{{btext}}</div>
</div>
</template>
<script>
import EventVue from '../router/event'
export default{
//在B组件中进行接收
data(){
return{
btext:'B组件'
}
},
created(){
this.borbtn()
},
methods:{
borbtn(){
EventVue.$on("newbtn",(message)=>{//这里的newbtn要和A组件中的一样
this.btext=message
})
}
}
}
</script>
<style scoped>
</style>