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監聽器的回調函數