组件实例的作用域是孤立的。这样我们就不能再子组件的模板内直接引用父组件的数据。要实现组件简单的通信:
1.子组件向父组件传值
子组件:
<template>
<div class="child">
<h1>子组件</h1>
<button v-on:click="toggle">向父组件传值</button>
</div>
</template>
<script>
export default{
data(){
return{}
},methods:{
toggle:function(){
this.$emit("p","子组件向父组件传值")
}
}
}
</script>
父组件:
<template>
<div class="index">
<child v-on:p="show"></child>
</div>
</template>
<script>
import child from '../../components/export/child'
export default{
components:{
child
},
data(){
return {}
},methods:{
show:function(data){
alert("父组件显示信息:"+data)
}
}
}
</script>
说明:父组件通过“v-on:p="show”监听由子组件vm.$emit触发的事
件,通过show接受从子组件传过来的数据
2.父组件给子组件传值
父组件:
<template>
<div class="parent">
<h1>父组件</h1>
<child v-bind:c="show"></child>
</div>
</template>
<script>
import child from '../../components/export/child'
export default{
components:{ child },
data(){
return {
show:'父组件向子组件传值'
}
}
}
</script>
子组件:
<template>
<div class="child">
<h1>子组件</h1>
<div>子组件显示信息:{{c}}</div>
</div>
</template>
<script>
export default{
data(){
return{}
},props:['c']
}
</script>
3.无关联组件传值
1.在assets新建一个事件总栈EventBus.js(它承担起组件之间通信的桥梁)
import Vue from 'vue'
export default new Vue;
2.创建一个新的组件FristTemplate:
<template>
<div class="FristTemplate">
<h1>FristTemplate组件</h1>
<button v-on:click="sendMsg">FristTemplate</button>
</div>
</template>
<script>
import bus from '@/assets/EventBus'
export default{
data(){
return{}
},methods(){
sendMsg:function(){
bus.$emit('bus','FristTemplate')
}
}
}
</script>
说明:我们在响应点击事件的sengMsg函数中用$emit触发了一个自定义的bus事件,并传递了一个字符参数
3.新建SecondChild组件
<template>
<div class="SecondChild">
<p>{{msg}}</p>
</div>
</template>
<script>
import bus from '@/assets/EventBus'
export default{
data(){
return{
msg:'默认值'
}
},mounted(){
var _this=this;
bus.$on('bus',function(msg){
this.msg=msg;
})
}
}
</script>
说明:在mounted中,监听了bus,并把传过来的字符串参数传递给了$on监听器的回调函数