vue父組件向子組件傳遞數據

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

1、props和event

父組件向子組件傳遞props數據，子組件通過觸發事件向父組件回傳數據，代碼如下：

//子組件 

<template>

<div @click="changeName('YYY')">{{name}}</div>

</template>

<script>

export default{

props:['name'],//or props:{name:{type:String,default:''}}

methods:{

//不能在子組件修改props數據，應觸發事件讓父組件處理

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將數據傳遞給子組件，子組件則觸發事件，由父組件監聽，並做相應處理。

2、ref

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

傳遞數據的思路：在父組件內通過ref獲取子組件實例，然後調用子組件方法，並傳遞相關數據作爲參數。代碼如下：

//子組件 

<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 

官方不推薦在生產環境使用

provide意爲提供，當一個組件通過provide提供了一個數據，那麼它的子孫組件就可以使用inject接受注入，從而可以使用祖先組件傳遞過來的數據。代碼如下：

//child

<template>

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

</template>

<script>

export default{

inject:['appName']

}

</script>

// root 

export default{

data(){

return {

appName:'Test'

}

},

provide:['appName']

}

4、vuex

vue官方推薦的全局狀態管理插件。