Vue——传值

组件实例的做用域是孤立的。这样咱们就不能再子组件的模板内直接引用父组件的数据。要实现组件简单的通讯：

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监听器的回调函数