本篇文章為大家帶來了關於vue的相關知識，其中主要總結了幾種vue中父子組件傳遞資料的方法，包括了props & event、ref屬性、provide & inject等等內容，具有一定的參考價值，下面一起來看看，希望對大家有幫助。
【相關推薦：javascript影片教學、vue.js教學】
最近在學習vue的來源碼，總結了幾種vue中父子元件傳遞資料的方法。
父元件向子元件傳遞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將資料傳遞給子元件，子元件則觸發事件，由父元件監聽，並做對應處理。
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>provide意為提供，當一個元件透過provide提供了一個數據，那麼它的子孫元件就可以使用inject接受注入，從而可以使用祖先元件傳遞過來的資料。程式碼如下：
//child
<template>
<div>{{appName}}</div>
</template>
<script>
export default{
inject:['appName']
}
</script>
// root
export default{
data(){
return {
appName:'Test'
}
},
provide:['appName']
}【相關推薦：javascript影片教學、vue.js教學】
以上是Vue中父元件傳遞資料給子元件的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！
