Vue 組件與組件之間的傳值主要分為三種：

• 父組件 傳值給 子組件

• 子組件 傳值給 父組件

• 組件 間的互相傳值
  

  ---

1.父組件傳值給子組件

通過(guò) props 傳值

父組件傳值給子組件，主要通過(guò)組件自定義props屬性來(lái)完成，通過(guò)此屬性用來(lái)接收來(lái)自父組件傳遞的數(shù)據(jù)，props的值可以是兩種，一種是字符串?dāng)?shù)組；另一種是對(duì)象，props 中聲明的數(shù)據(jù)與組件data 函數(shù)return 的數(shù)據(jù)主要區(qū)別就是props 的來(lái)自父級(jí)，而data 中的是組件自己的數(shù)據(jù)，作用域是組件本身，這兩種數(shù)據(jù)都可以在模板template 及計(jì)算屬性computed和方法methods 中使用

• 父組件 parent.vue 文件

<template>
    <div class="parent-container">
        父組件傳遞的值：{{ msg }}
        <!-- 通過(guò)自定義屬性的方式，完成父組件中的數(shù)據(jù)傳遞給子組件使用 -->
        <Child :msgFromParent="msg"></Child>
    </div>
</template>

<script>
import Child from "./Child.vue"

export default {
    data() {
        return {
            msg: "parent data"
        }
    },
    components: {
        Child
    }
};
</script>

<style scoped>
.parent-container {
    width: 500px;
    height: 100px;
    background-color: rgb(235, 138, 138);
    color: #fff;
    font-size: 24px;
    text-align: center;
}
</style>

• 子組件 Child.vue 文件

<template>
    <div class="child-container">
        接收父組件傳遞的值：{{ msgFromParent }}
    </div>
</template>

<script>
export default {
    // 接受父組件傳遞的數(shù)據(jù)
    props: ["msgFromParent"]
}
</script>

<style scoped>
</style>

2.子組件傳值給父組件

通過(guò) $emit 傳值

Vue 中對(duì) $emit 定義為:
vm.$emit( eventName, […args] )

• 參數(shù)：
  {string} eventName
[...args]
  觸發(fā)當(dāng)前實(shí)例上的事件。附加參數(shù)都會(huì)傳給監(jiān)聽(tīng)器回調(diào)

子組件傳值給父組件，主要通過(guò)自定義事件$emit來(lái)完成 ，$emit第一個(gè)參數(shù)為自定義事件，第二個(gè)參數(shù)為要傳遞給父組件的值，父組件在子組件上綁定自定義事件來(lái)接收子組件傳遞的數(shù)據(jù)

• 父組件 parent.vue 文件

<template>
  <div class="parent-container">
    子組件傳遞的值：{{ info }}
    // 給子組件綁定自定義事件來(lái)接收子組件傳遞的數(shù)據(jù)
    <Child @getInfo="getData"></Child>
  </div>
</template>

<script>
import Child from "./Child.vue";

export default {
  data() {
    return {
      info: "",
    };
  },
  components: {
    Child,
  },
  methods: {
    getData(info) {
      this.info = info;
    },
  },
};
</script>

<style scoped>
</style>

• 子組件 Child.vue 文件

<template>
  <div class="child-container">
    子組件傳遞數(shù)據(jù)：{{ info }}
    // 點(diǎn)擊向父組件傳遞數(shù)據(jù)
    <p><button @click="sendParent">點(diǎn)擊向父組件傳遞數(shù)據(jù)</button></p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: "child data",
    };
  },
  methods: {
    // 子組件通過(guò)$emit觸發(fā)自定義事件給父組件傳值
    sendParent() {
      this.$emit("getInfo", this.info);
    },
  },
};
</script>

<style scoped>
</style>

3.組件間互相傳值

Vue 中可以通過(guò)一個(gè)中間組件 (專門用于數(shù)據(jù)傳遞：事件中心) 完成數(shù)據(jù)的傳遞，如圖：

事件中心.png

• 事件中心 ：vm.js

// 引入 Vue
import Vue from "vue"
// 創(chuàng)建一個(gè) Vue 實(shí)例對(duì)象，專門用于生成實(shí)例
const vm = new Vue({})
// 對(duì)外暴露實(shí)例
export default vm

• 組件 A.vue 文件

<template>
  <div class="a-container">
    A組件向B組件傳遞數(shù)據(jù)：{{ msg }}
    <br />
    A組件接收B組件傳遞數(shù)據(jù)：{{ info }}
    <p><button @click="sendToB">點(diǎn)擊向B組件發(fā)送數(shù)據(jù)</button></p>
  </div>
</template>

<script>
// 引入事件中心 vm
import vm from "../utils/vm.js";

export default {
  data() {
    return {
      msg: "A data",
      info: ""
    };
  },
  methods: {
    // 觸發(fā)自定義事件發(fā)送數(shù)據(jù)給B組件
    sendToB() {
      vm.$emit("A-event", this.msg);
    },
    getData() {
      // 監(jiān)聽(tīng)B-event事件是否發(fā)生
      vm.$on("B-event", (dat) => {
        this.info = dat;
      });
    },
  },
  created() {
    // 當(dāng)組件實(shí)例一旦創(chuàng)建，監(jiān)聽(tīng)其他組件是否給自己發(fā)送消息
    this.getData();
  },
};
</script>

<style scoped>
</style>

• 組件 B.vue 文件

<template>
  <div class="b-container">
    B組件向A組件傳遞數(shù)據(jù)：{{ info }}
    <br />
    B組件接收A組件傳遞數(shù)據(jù)：{{ msg }}
    <p><button @click="sendToA">點(diǎn)擊向A組件發(fā)送數(shù)據(jù)</button></p>
  </div>
</template>

<script>
import vm from "../utils/vm.js";

export default {
  data() {
    return {
      info: "B data",
      msg: ""
    };
  },
  methods: {
    sendToA() {
      vm.$emit("B-event", this.info);
    },
    getData() {
      vm.$on("A-event", (dat) => {
        this.msg = dat;
      });
    },
  },
  created() {
    this.getData();
  },
};
</script>

<style scoped>
</style>