vue2.0父子组件和非父子组件之间的通信
程序员文章站
2024-03-15 10:48:23
...
1、父组件传值给子组件
通过props来实现传递数据
父组件:
<template>
<div>
<child message="我是父组件传的值"></child><!-- 如果是变量 :message 切标签用-代替驼峰-->
</div>
</template>
<script>
import child from './child' //引入子组件
export default {
components:{
child
}
}
</script>
子组件:
<template>
<div class="child">
{{message}}
</div>
</template>
<script>
export default {
//props:['message']
props:{
message:{
type:String,
default:''
}
}
}
</script>
2、子组件与父组件之间的传值
vue数据的传递只能是单向的,所以不能想父组件传递子组件那样,而是要通过触发事件来通知父组件改变数据,从而达到子组件改变父组件数据的功能
子组件:
<template>
<div class="child">
<button @click="changeDate">改变父组件的数据</button>
</div>
</template>
<script>
export default {
methods:{
changeDate(){
this.$emit('childClick');
}
}
}
</script>
父组件:
<template>
<div>
<p>{{message}}</p>
<child @childClick="change"></child>
</div>
</template>
<script>
import child from './child'
export default {
components:{
child
},
data(){
return{
message:"我是数据"
}
},
methods:{
change(){
this.message='我被child改变了'
}
}
}
</script>
3、非父子组件之间的通信
非父子组件的通信,通过创建一个新的实例,相当于一个中转站,通过他来传递和接受事件
在src目录下新建一个eventBus.js文件
import Vue from 'vue'
var eventBus = new Vue()
export default eventBus
A组件:
<template>
<div class="A">
<button @click="clickA">我是A组件</button>
</div>
</template>
<script>
import eventBus from '../eventBus.js'
export default {
methods:{
clickA(){
eventBus.$emit('change','我是A组件的数据');
}
}
}
</script>
B组件:
<template>
<div class="B"></div>
</template>
<script>
import eventBus from '../eventBus.js'
export default {
mounted(){
eventBus.$on('change',val=>{
console.log(val); //我是A组件的数据
})
}
}
</script>
这样就实现了非父子组件之间的通信了,原理就是把eventBus当作一个中转站
上一篇: vue-------组件之间通信
下一篇: Java堆栈、泛型