以下文章浅谈以下vue组件之间的通信,
props
props主要是父组件向子组件传值,以下为使用方法
//父组件Home 子组件S1
//父组件通过绑定属性的方式向子组件传递数据
//子组件通过props来接收
//以下为父组件Home的代码
<template>
<div class="home">
以下为组件S1的内容
<S1 :s1Data='s1Data'/>
</div>
</template>
<script>
import S1 from '@/components/s1.vue'
export default {
name: 'Home',
data(){
return{
s1Data:'这是Home组件传给组件S1的内容'
}
},
components: {
S1,
}
}
</script>
//以下为子组件S1的代码
<template>
<div>
s1
<br/>
{{s1Data}}
</div>
</template>
<script>
export default {
props:['s1Data']
}
</script>
<style>
</style>
结果:
$emit
子组件向父组件传值主要是通过事件,以下是使用方法
//以下是父组件Home的代码
<template>
<div class="home">
以下为组件S1的内容
<S1 @toParentEvent='recData'/>
{{s1ToHomeData}}
</div>
</template>
<script>
import S1 from '@/components/s1.vue'
export default {
name: 'Home',
data(){
return{
s1ToHomeData:''
}
},
components: {
S1,
},
methods:{
recData(data){
this.s1ToHomeData = data
}
}
}
</script>
//以下是子组件S1的代码
<template>
<div>
s1
<br/>
<button @click="toParent" >向父组件传值</button>
</div>
</template>
<script>
export default {
data(){
return{
data:'我是组件S1的数据'
}
},
methods:{
toParent(){
this.$emit('toParentEvent',this.data)
}
}
}
</script>
<style>
</style>
点击按钮后,子组件向父组件传值
自定义事件
自定义事件主要是兄弟组件之间传值,主要是通过Vue的$emit
和$on
,记得在定义事件后再组件销毁前通过$off
解绑事件。
条件:
- 一个新的vue实例
- 各个兄弟共用同一个事件机制
//父组件
<template>
<div class="home">
以下为组件S1的内容
<S1 />
<hr />
以下为组件S2的内容
<S2/>
<hr />
</div>
</template>
<script>
import S1 from '@/components/s1.vue'
import S2 from '@/components/s2.vue'
export default {
name: 'Home',
components: {
S1,
S2
},
}
</script>
//兄弟组件S1
<template>
<div>
s1
<br/>
<button @click="toS2" >向组件S2传值</button>
</div>
</template>
<script>
import {vm} from '@/vm.js'
export default {
data(){
return{
data:'我是组件S1的数据'
}
},
methods:{
toS2(){
vm.$emit('toS2Event',this.data)
}
},
beforeDestroy(){
vm.$off('toS2Event')
}
}
</script>
//兄弟组件S2
<template>
<div>
s2
{{s1ToS2Data}}
</div>
</template>
<script>
import {vm} from '@/vm.js'
export default {
data(){
return{
s1ToS2Data:''
}
},
mounted(){
vm.$on('toS2Event',(data)=>{
this.s1ToS2Data = data
})
}
}
</script>
vm.js
import Vue from 'vue'
export var vm = new Vue()