vue父組件向子組件傳遞數(shù)據(jù)

vue父組件怎么向子組件傳遞數(shù)據(jù)呢？不知道的小伙伴來(lái)看看小編今天的分享吧!

vue父組件向子組件傳遞數(shù)據(jù)的方法有四種：props和event、ref、provide和inject、vuex。

1、props和event

父組件向子組件傳遞props數(shù)據(jù)，子組件通過(guò)觸發(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>

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

2、ref

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

傳遞數(shù)據(jù)的思路：在父組件內(nèi)通過(guò)ref獲取子組件實(shí)例，然后調(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)一個(gè)組件通過(guò)provide提供了一個(gè)數(shù)據(jù)，那么它的子孫組件就可以使用inject接受注入，從而可以使用祖先組件傳遞過(guò)來(lái)的數(shù)據(jù)。代碼如下：

//child

<template>

<div>{{appName}}</div>

</template>

<script>

export default{

inject:['appName']

}

</script>

// root 

export default{

data(){

return {

appName:'Test'

}

},

provide:['appName']

}

4、vuex

vue官方推薦的全局狀態(tài)管理插件。

以上就是小編今天的分享了，希望可以幫助到大家。

聲明：本網(wǎng)頁(yè)內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問(wèn)題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com