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 發生改變，子組件也會自動地更新視圖。但是在子組件中，我們不要去修改 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中的值發生改變時，將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將通過這個事件傳遞給父組件。