Vue 的組件作用域都是孤立的，不允許在子組件的模板內直接引用父組件的數據榜揖。必須使用特定的方法才能實現組件之間的數據傳遞森瘪。組件之間傳遞數據大致分為三種情況：

父組件向子組件傳遞數據昔穴，通過 props 傳遞數據拓售。
子組件向父組件傳遞數據亿蒸，通過 events 傳遞數據彻桃。
兩個同級組件之間傳遞數據，通過 event bus 傳遞數據。

一、父組件向子組件傳遞數據

子組件部分：

<template>
    <div class="child">
        {{ msg }}
    </div>
</template>

<script>
export default {
  name: 'child',
  data(){
    return {
    
    }
  },
  props: ['msg']
</script>

在child.vue中，msg實在data中定義的變量，使用props：['msg']從父組件中獲取msg的值

父組件部分：

<template>
    <div class="child">
        child
        <child :msg="message"></child>
    </div>
</template>

<script>
import child from './child.vue'
export default {
  name: 'parent',
  components: { child },
  data () {
    return {
      message: 'hello vue'
    }
  }
}
</script>

在調用組件的時候，使用v-bind將msg的值綁定為parent.vue中定義的變量message，這樣就能將parent.vue中的message的值傳給child.vue了绢片。

單項數據流

當父組件的 message 發(fā)生改變窗看，子組件也會自動地更新視圖著恩。但是在子組件中遭居，我們不要去修改 prop话侧。如果你必須要修改到這些數據，你可以使用以下方法：
方法一：把 prop 賦值給一個局部變量原献，然后需要修改的話就修改這個局部變量，而不影響 prop

export default {
    data(){
        return {
            newMessage: null
        } 
    },
    props: ['message'],
    created(){
        this.newMessage = this.message;
    }
}

方法二：在計算屬性中對 prop 進行處理

export default {
    props: ['message'],
    computed: {
        newMessage(){
            return this.message + ' 哈哈哈';
        }
    }
}

二、子組件向父組件傳遞數據

子組件主要通過實踐傳遞數據給父組件的

子組件部分：

<template>
    <div class="child">
      <span>用戶名：</span>
      <input v-model="username" @change="sendUser" />
    </div>
</template>

子組件的html中丙唧，當input中的值發(fā)生改變時，將username傳遞給parent.vue。
首先聲明了一個sendUser方法珊佣，用change事件來調用sendUser贾惦。

<script>
 export default {
   name: 'parend',
   data () {
     return {
         username: ''
     }
   },
   methods: {
     sendUser () {
       this.$emit('changeName', this.username)
     }
   }
}
</script>

在sendUser中，使用$emit來遍歷changeName事件窃款，并返回this.name，其中changeName是一個自定義的事件，功能類似于一個中轉润讥，this.name將通過這個事件傳遞給父組件勺卢。

父組件部分：

<template>
    <div class="parent">
        <child @changeName="getUser"></child>
        <p>用戶名：{{user}}</p>
    </div>
</template>

在父組件中聲明了一個getUser方法，用changeName事件調用getUser方法象对，獲取從子組件傳遞過來的參數username

<script>
import child from './child.vue'

export default {
  name: 'parent',
  components: { child },
  data () {
    return {
      user: ''
    }
  },
  methods: {
    getUser(data) {
      this.user = data
    }
  }
}
</script>

getUser方法中的參數msg就是從子組件中傳遞過來的參數uesrname。

三宴抚、同級組件間的數據傳遞

有時候兩個組件也需要通信（非父子關系）勒魔。當然Vue2.0提供了Vuex，但在簡單的場景下菇曲，可以使用一個空的Vue實例作為中央事件總線冠绢。

<template>
    <div id="app">
        <c1></c1>   //組件1
        <c2></c2>  //組件2
    </div>
</template>

組件c1中：

<template>
    <div class="c1">
        page
        <button @click="changeMsg">click</button>
    </div>
</template>

<script>
var Bus = new Vue(); //為了方便將Bus（空vue）定義在一個組件中，在實際的運用中一般會新建一Bus.js
export default {
  name: 'c1',
  data () {
    return {
      message: 'hi'
    }
  },
  methods: {
    changeMsg () {    //點擊按鈕常潮，將this.message傳遞給c2
      bus.$emit('sendMsg', this.message)
    }
  }
}
</script>

組件c2中：

<template>
    <div class="c2">
        {{msg}}
    </div>
</template>

<script>
var Bus = new Vue();

export default {
  name: 'c2',
  data () {
    return {
      msg: ''
    }
  },
  created () {
    bus.$on('sendMsg',(data)=>{   //data即為c1組件中的message
      this.msg = data
    })
  }
}
</script>

在實際運用中弟胀，一般將bus抽離出來：

//Bus.js
import Vue from 'vue'
const Bus = new Vue()
expore default Bus

組件調用時引用（import Bus from './Bus.js'）
但這種引入方式，經過webpack打包后可能會出現Bus局部作用域的情況喊式，即引用的是兩個不同的Bus孵户，導致不能正常通信
實際運用：
將Bus注入到Vue根對象中

import Vue from 'vue'
const Bus = new Vue()

var app= new Vue({
    el:'#app',
　　 data:{
　　　　Bus
    }　　

})

在子組件中通過this.$root.Bus.$on(),this.$root.Bus.$emit()來調用