vue-父子組件傳值

對於父子組件能夠簡單地理解爲A組件中嵌入了B組件，則A組件稱做父組件，B組件稱爲子組件。對於父子組件通訊一般採用的是 props down(父組件向子組件傳值), events up(子組件向父組件傳值)兩種方式。

首先咱們建立一個子組件Subcomponent.vue，在父組件中引入並註冊使用，父組件代碼：

js: // 引入子組件
    import Subcomponent from '@/components/Subcomponent'
    export default{
        name: 'Parent',
        components:{
            // 註冊子組件
            Subcomponent
        },
        data(){
            return{
                parent:'父組件中的值'
            }
        }
    }
wxml:

　　<!-- 使用子組件 -->
　　<Subcomponent :fromParent="parent"></Subcomponent>

 

那咱們先看下props down：

父組件在使用子組件時，在子組件中動態綁定一個自定義屬性(fromParent)，對於子組件則是經過定義一個props屬性去接收父組件傳過來的值，這裏的props是個數組props:['fromParent'],在子組件中使用該值和使用data中的數據方式一致。

子組件代碼：

<template>
    <div>
        <p>我是子組件，右側值爲父組件傳過來的值<-----{{fromParent}}</p>
    </div>
</template>

<script>
    export default{
        name: 'Subcomponent',
        props:['fromParent'],
        data(){
            return{
                
            }
        }
    }
</script>

效果圖以下

 接下來看看子組件如何向父組件傳值，首先他們須要一箇中間介質自定義事件,對於子組件來講須要觸發某個事件進行傳值，這裏咱們在子組件中寫一個button按鈕並綁定一個click事件SubcomponentFun，在該處理函數(SubcomponentFun)中經過$emit來觸發一個自定義事件監聽器(這裏我定義爲zdyParentfun)，並傳遞一個參數(也就是自定義事件監聽器對應響應事件中的形參params)。對於父組件就是在使用子組件時，經過v-on：自定義事件監聽器名(這裏和子組件中的自定義事件監聽器名稱一致zdyParentfun) 並綁定一個響應事件(handleSubcomponentFun)，用於處理子組件傳過來的值。具體的實現代碼以下：

子組件：

<template>
    <div>
        <p>我是子組件，右側值爲父組件傳過來的值<-----{{fromParent}}</p>
        <!-- 向父組件傳值的按鈕 -->
        <button type="success" @click="SubcomponentFun">改變父組件值</button>
    </div>
</template>

<script>
    export default{
        name: 'Subcomponent',
        props:['fromParent'],
        data(){
            return{
                fromSubcomponent:'該值Subcomponent來自於子組件',
            }
        },
        methods:{
            SubcomponentFun(){
                console.log(this.fromSubcomponent)
                this.$emit('zdyParentfun',this.fromSubcomponent)
            }
        }
    }
</script>

父組件：

<template>
    <div>
        <b>我是父組件   {{params}}</b>
        <!-- 子組件 -->
        <Subcomponent :fromParent="parent" v-on:zdyParentfun="handleSubcomponentFun"></Subcomponent>
        <input type="text" v-model="parent" />
    </div>
</template>

<script>
    // 引入子組件
    import Subcomponent from '@/components/Subcomponent'
    export default{
        name: 'Parent',
        components:{
            // 註冊子組件
            Subcomponent
        },
        data(){
            return{
                parent:'父組件中的值',
                params:"" 
            }
        },
        methods:{
            handleSubcomponentFun:function (params){
                this.params = params
                console.log(params)
            }
        }
    }
</script>

效果圖以下