vue父子組件的傳值總結

久違的博客園我又回來了。此篇文章寫得是vue父子組件的傳值，雖然網上已經有很多了。寫此文章的目的就是記錄下個人學習的一部分。接下來我們就進入主題吧！

在開發vue項目中，父子組件的傳值是避免不掉的。

情況一：父組件給子組件傳值方法，使用props

父頁面：parent.vue

<template>
    <div class="sidebar_contianer">
        <sidebar-item :routerData="transmitData"></sidebar-item>
    </div>
</template>
<script>
import sidebarItem from './sidebarItem'
export default {
    data(){
        return{
            transmitData:{
                title:'首頁',
                uuid:'123'
            }
        }
    },
    components:{
        sidebarItem
    }
}
</script>

 

第一步：用import引入子組件

第二步：在components中注入子組件

第三步：在子組件中定義一個指令:routerData="transmitData"  （routerData名稱需要和子組件中的props保持一致,transmitData是要傳遞給子組件的數據）

子頁面：child.vue

<script>
export default {
    name:'sidebarItem',
    props:{
        transmitData:{
            type:Object,
            default:null
        }
    }
}
</script>

第四步：在子組件中定義props屬性，transmitData的type可以自定義類型（但是必須和父組件中的數據類型一致，否則會報錯），default是默認值。

 

情況二：子組件要給父組件傳值方法，使用$emit

子頁面：a.vue

<template> 
    <div class="testCom">
        <input type="text" v-model="message" />
        <button @click="click">發送消息給爸爸</button>
    </div>
</template>
<script>
export default {
    data() {
        return {
          message: '我是來自子組件的消息'
        }
    },
    methods: {
      click() {
            //1、childFn 組件方法名，父組件中用childFn方法接收子組件中的數據；2、message是傳遞給父組件的數據
            this.$emit('childFn', this.message);
        }
    }    
}
</script>

第一步：this.$emit("方法名","傳遞給父組件的數據")

父頁面：b.vue

<template>
    <div>
      <child-com @childFn="parentFn"></child-com>
    </div>
</template>

<script>
export default {
    // ...
    data: {
        message: ''
    },
    methods: {
       parentFn(childData) {
        this.message = childData;
      }
    }
}
</script>

第二步：父組件中注入子組件（此處代碼中省略，如要參考請看情況一）

第三步：定義方法childFn（必須和子組件中方法名一致），parentFn定義可隨意。

注： 大型的項目如果用以上兩種方法傳遞值，耦合性大。所以大型項目還是的用vuex對狀態進行管理。