Vue中父組件怎么向子組件傳遞數(shù)據(jù)

本篇內(nèi)容介紹了“Vue中父組件怎么向子組件傳遞數(shù)據(jù)”的有關(guān)知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細閱讀，能夠?qū)W有所成！

1.props & event

父組件向子組件傳遞props數(shù)據(jù)，子組件通過觸發(fā)事件向父組件回傳數(shù)據(jù)，代碼如下：

//子組件 
<template>
    <div @click="changeName('YYY')">{{name}}</div>
</template>
<script>
export default{
    props:['name'],//or props:{name:{type:String,default:''}}
    methods:{
        //不能在子組件修改props數(shù)據(jù)，應(yīng)觸發(fā)事件讓父組件處理
        changeName(newName){
            this.$emit('changeName',newName)
        }
    }
}
</script>
 
//父組件
<template>
    <div>
        <child-comp :name="name" @changeName="changeName"></child-comp>
    </div>
</template>
<script>
    import childComp from 'path'
    export default{
        data(){
            return {name:'XXX'}
        },
        components:{
            childComp
        },
        methods:{
            changeName(newName){
                this.name = newName;
            }
        }
    }
</scritp>

以上就是一個完整的流程，父組件通過props將數(shù)據(jù)傳遞給子組件，子組件則觸發(fā)事件，由父組件監(jiān)聽，并做相應(yīng)處理。

2.ref

ref屬性可定義在子組件或原生DOM上，如果在子組件上，則指向子組件實例，如果在原生DOM上，則指向原生DOM元素（可以用做元素選擇，省去querySelector的煩惱）。

傳遞數(shù)據(jù)的思路：在父組件內(nèi)通過ref獲取子組件實例，然后調(diào)用子組件方法，并傳遞相關(guān)數(shù)據(jù)作為參數(shù)。代碼如下：

//子組件 
<template>
    <div>{{parentMsg}}</div>
</template>
<script>
export default{
    data(){
        return {
            parentMsg:''
        }
    },
    methods:{
        getMsg(msg){
            this.parentMsg = msg;
        }
    }
}
</script>
 
//父組件
<template>
    <div>
        <child-comp ref="child"></child-comp>
        <button @click="sendMsg">SEND MESSAGE</button>
    </div>
</template>
<script>
    import childComp from 'path'
    export default{
        components:{
            childComp
        },
        methods:{
            sendMsg(){
                this.$refs.child.getMsg('Parent Message');
            }
        }
    }
</scritp>

3.provide & inject 官方不推薦在生產(chǎn)環(huán)境使用

provide意為提供，當(dāng)一個組件通過provide提供了一個數(shù)據(jù)，那么它的子孫組件就可以使用inject接受注入，從而可以使用祖先組件傳遞過來的數(shù)據(jù)。代碼如下：

//child
<template>
    <div>{{appName}}</div>
</template>
<script>
export default{
    inject:['appName']
}
</script>
 
// root 
export default{
    data(){
        return {
            appName:'Test'
        }
    },
    provide:['appName']
}

“Vue中父組件怎么向子組件傳遞數(shù)據(jù)”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站，小編將為大家輸出更多高質(zhì)量的實用文章！