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官方推薦的全局狀態管理插件。