Vue中父元件傳遞資料給子元件的方法

本篇文章為大家帶來了關於vue的相關知識，其中主要總結了幾種vue中父子組件傳遞資料的方法，包括了props & event、ref屬性、provide & inject等等內容，具有一定的參考價值，下面一起來看看，希望對大家有幫助。

【相關推薦：javascript影片教學、vue.js教學】

最近在學習vue的來源碼，總結了幾種vue中父子元件傳遞資料的方法。

1.props & event

父元件向子元件傳遞props數據，子元件透過觸發事件向父元件回傳數據，程式碼如下：

//子组件 
<template>
    <div @click="changeName(&#39;YYY&#39;)">{{name}}</div>
</template>
<script>
export default{
    props:[&#39;name&#39;],//or props:{name:{type:String,default:&#39;&#39;}}
    methods:{
        //不能在子组件修改props数据，应触发事件让父组件处理
        changeName(newName){
            this.$emit(&#39;changeName&#39;,newName)
        }
    }
}
</script>
 
//父组件
<template>
    <div>
        <child-comp :name="name" @changeName="changeName"></child-comp>
    </div>
</template>
<script>
    import childComp from &#39;path&#39;
    export default{
        data(){
            return {name:&#39;XXX&#39;}
        },
        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:&#39;&#39;
        }
    },
    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 &#39;path&#39;
    export default{
        components:{
            childComp
        },
        methods:{
            sendMsg(){
                this.$refs.child.getMsg(&#39;Parent Message&#39;);
            }
        }
    }
</scritp>

3.provide & inject 官方不建議在生產環境使用

provide意為提供，當一個元件透過provide提供了一個數據，那麼它的子孫元件就可以使用inject接受注入，從而可以使用祖先元件傳遞過來的資料。程式碼如下：

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

【相關推薦：javascript影片教學、vue.js教學】

以上是Vue中父元件傳遞資料給子元件的方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！