一、父組件傳子

父組件向子組件傳值，可以通過綁定屬性傳值；子組件通過props接收父組件傳值。
父組件：

<div class="animal">
   <h2>動物</h2>
   <Bird :name="name1" :age="age1" ></Bird>
</div>

data() {
    return {
        name1:'大雁',
        age1:20
    }
}

子組件：

<div class="animal">
  <h2>動物</h2>
  <div>名稱：{{name}}</div>
  <div>年齡：{{age}}</div>
</div>

// 接收父組件傳值
props: ["name", "age"]

二、子組件傳父

子組件通過$emit觸發(fā)一個自定義事件，將更新的數(shù)據(jù)傳給父組件。
子組件：

<div class="bird">
  <h2>鳥類</h2>
  <div>名稱：{{ myName }}</div>
  <div>年齡：{{ myAge }}</div>
  <button @click="updateData">修改信息</button>
</div>

props: ["name", "age"],
data() {
  return {
    myname: this.name,
    myage: this.age,
  };
},
methods: {
  updateData() {
    this.myname = "仙鶴";
    this.myage = 10;
    this.$emit("updateData", {name: this.myname,age: this.myage});
  }
}

父組件：

<div class="animal">
   <h2>動物</h2>
   <div>名稱：{{name1}}</div>
   <div>年齡：{{age1}}</div>
   <Bird :name="name1" :age="age1" @updateData="updateData"></Bird>
</div>

data() {
    return {
        name1:'大雁',
        age1:20
    }
},
methods: {
  // 該方法，修改name1和age1數(shù)據(jù)
  updateData(e) {
    this.name1 = e.name;
    this.age1 = e.age;
  }
}

三、祖孫組件傳值

首先祖先給子孫后代傳值也是可以用props傳遞，一層層傳遞，如果嵌套了五六層，這種方法就顯得很繁瑣。
所以就用到了provide(提供)和inject(注入)。這兩個是配套使用的，以允許祖先向所有祖先后代注入一個依賴。祖先組件通過provide添加依賴數(shù)據(jù)，它里面定義的數(shù)據(jù)，后代組件可以通過inject選擇性注入并直接使用。
注意：后代組件通過inject注入祖級組件中的依賴數(shù)據(jù)，跟props一樣，接收的數(shù)據(jù)是只讀的，不能修改。

祖先組件：

<div class="animal">
  <div>名稱：{{ name2 }}</div>
  <div>年齡：{{ age2 }}</div>
  <Bird :name="name1" :age="age1" ></Bird>
</div>

data() {
  return {
    name2: "小明",
    age2: 5
  };
}
// 添加依賴數(shù)據(jù)，它里面定義的數(shù)據(jù)，子組件可以選擇性注入并直接使用。
provide() {
  return {
    doveName: this.name2,
    doveAge: this.age2,
    // 將修改name2和age2的方法，設(shè)置為依賴數(shù)據(jù)
    updateDove: this.updateDove,
  };
},
methods: {
  updateDove(dove) {
    this.name2 = dove.name;
    this.age2 = dove.age;
  },
}

后代組件：

<div class="dove">
  <h2>鴿子</h2>
  <div>名稱：{{ mydoveName }}</div>
  <div>年齡：{{ mydoveAge }}</div>
  <button @click="updateData">修改數(shù)據(jù)</button>
</div>

// 從父級組件中注入依賴的數(shù)據(jù)
inject: ["doveName", "doveAge", "updateDove"],
data() {
  return {
    mydoveName: this.doveName,
    mydoveAge: this.doveAge,
  };
},
methods: {
  updateData() {
    this.mydoveName = "小紅";
    this.mydoveAge = 8;
    // 執(zhí)行父級組件中的updateDove方法
    this.updateDove({ name: this.mydoveName,age: this.mydoveAge, });
  }
}

四、兄弟組件傳值

在Vue的原型對象上，添加一個$bus屬性，該屬性的的屬性值是一個Vue實例。Vue的所有實例，都將共用同一個$bus。這個$bus屬性，稱之為：中央事件總線。
vm.$emit( eventName, […args] )：觸發(fā)當(dāng)前實例上的事件。附加參數(shù)都會傳給監(jiān)聽器回調(diào)。
vm.$on( event, callback )：監(jiān)聽當(dāng)前實例上的自定義事件。事件可以由 vm.$emit 觸發(fā)?；卣{(diào)函數(shù)會接收所有傳入事件觸發(fā)函數(shù)的額外參數(shù)。
vm.$once( event, callback )：監(jiān)聽一個自定義事件，但是只觸發(fā)一次。一旦觸發(fā)之后，監(jiān)聽器就會被移除。
vm.$off( [event, callback] )：移除自定義事件監(jiān)聽器。

main.js文件：

Vue.prototype.$bus = new Vue()

兄弟A鴿子組件：
點擊鴿子組件中的‘修改烏鴉數(shù)據(jù)’按鈕，可以修改烏鴉組件頁面的數(shù)據(jù)。

<div class="dove">
  <h2>鴿子</h2>
  <button @click="updateCrow">修改烏鴉數(shù)據(jù)</button>
</div>

methods: {
  updateCrow() {
    this.$bus.$emit("updateCrow", { name: "小黃", age: 20 });
  }
}

兄弟B烏鴉組件：

<div class="crow">
  <h2>烏鴉</h2>
  <div>名稱：{{ name }}</div>
  <div>年齡：{{ age }}</div>
</div>

data() {
  return {
    name: "小劉",
    age: 20,
  };
},
mounted() {
  // 監(jiān)聽updateCrow事件，當(dāng)該事件觸發(fā)時，會執(zhí)行對應(yīng)的回調(diào)函數(shù)
  this.$bus.$on("updateCrow", (e) => {
    this.name = e.name;
    this.age = e.age;
  });
}