【vue】組件之間傳值的三種方式

vue的組件傳值分為三種方式：父傳子、子傳父、非父子（同級）組件傳值

引用官網的一句話：父子組件的關係可以總結為 prop 向下傳遞，事件向上傳遞

父組件通過 prop 給子組件下發數據，子組件通過事件給父組件發送消息，如下圖所示：

1、父傳子

子組件的代碼：

 1 <template>
 2     <div id="container">
 3         {{msg}}
 4     </div>
 5 </template>
 6 <script>
 7 export default {
 8   data() {
 9     return {};
10   },
11   props:{
12     msg: String
13   }
14 };
15 </script>
16 <style scoped>
17 #container{
18     color: red;
19     margin-top: 50px;
20 }
21 </style>

父組件的代碼：

 1 <template>
 2     <div id="container">
 3         <input type="text" v-model="text" @change="dataChange">
 4         <Child :msg="text"></Child>
 5     </div>
 6 </template>
 7 <script>
 8 import Child from "@/components/Child";
 9 export default {
10   data() {
11     return {
12       text: "父組件的值"
13     };
14   },
15   methods: {
16     dataChange(data){
17         this.msg = data
18     }
19   },
20   components: {
21     Child
22   }
23 };
24 </script>
25 <style scoped>
26 </style>

總結：父傳子的實現方式就是通過props屬性，子組件通過props屬性接收從父組件傳過來的值，而父組件傳值的時候使用 v-bind 將子組件中預留的變數名綁定為data裡面的數據即可。

2、子傳父

子組件代碼：

 1 <template>
 2     <div id="container">
 3         <input type="text" v-model="msg">
 4         <button @click="setData">傳遞到父組件</button>
 5     </div>
 6 </template>
 7 <script>
 8 export default {
 9   data() {
10     return {
11       msg: "傳遞給父組件的值"
12     };
13   },
14   methods: {
15     setData() {
16       this.$emit("getData", this.msg);
17     }
18   }
19 };
20 </script>
21 <style scoped>
22 #container {
23   color: red;
24   margin-top: 50px;
25 }
26 </style>

父組件代碼：

 1 <template>
 2     <div id="container">
 3         <Child @getData="getData"></Child>
 4         <p>{{msg}}</p>
 5     </div>
 6 </template>
 7 <script>
 8 import Child from "@/components/Child";
 9 export default {
10   data() {
11     return {
12       msg: "父組件預設值"
13     };
14   },
15   methods: {
16     getData(data) {
17       this.msg = data;
18     }
19   },
20   components: {
21     Child
22   }
23 };
24 </script>
25 <style scoped>
26 </style>

總結：子傳父的實現方式就是用了 this.$emit 來遍歷 getData 事件，首先用按鈕來觸發 setData 事件，在 setData 中 用 this.$emit 來遍歷 getData 事件，最後返回 this.msg。

總結：

• 子組件中需要以某種方式例如點擊事件的方法來觸發一個自定義事件
• 將需要傳的值作為$emit的第二個參數，該值將作為實參傳給響應自定義事件的方法
• 在父組件中註冊子組件併在子組件標簽上綁定對自定義事件的監聽

3、非父子 

vue 中沒有直接子對子傳參的方法，建議將需要傳遞數據的子組件，都合併為一個組件

如果一定需要子對子傳參，可以先從傳到父組件，再傳到子組件（相當於一個公共bus文件）

為了便於開發，vue 推出了一個狀態管理工具 vuex，可以很方便實現組件之間的參數傳遞，推薦使用vuex。