Vue父子元件傳值的三種方法

2022-12-21 14:00:28

前言

例如：Vue的學習是路阻且艱的，這是一個系列文章，幫助vue的新手可以快速上路，建立的自己的專案，該系列文章主要講解作者在vue學習之路上，建立專案中最重要的知識，因為筆者水平有限，希望大家多多指正，該系列文章旨在讓大家感受vue的便捷，詳細學習vue希望大家多多觀看官方檔案.

一、Vue父子傳值的方法

我們在Vue專案進行父子傳值主要有以下三種方法：
(1) props / $emit
(2) $parent / children
(3) $ref
在觀看方法詳解時大家先建立一個父元件parent.vue和一個子元件child.vue並完成父子元件的註冊

二、方法詳解

1.props / $emit

⼦元件中通過定義props接收⽗元件中通過v-bind繫結的資料

父傳子

首先在父元件中定義一個範例data

import child from './child.vue' 
    export default {
        name:'parent',
        components:{
            child
        },
        data(){
            return{
                parentdata:"This is the first word from parent"
            }
        }
    }

在父元件中使用子元件時用v-bind定義一個屬性並將父元件的parentdata傳入

<child :parentdata="parentdata"></child>

在子元件中使用props接收傳入的屬性，並可以直接使用

<template>
    <div>
        {{parentdata}}
    </div>
</template>

<script>
    export default {
        name:"child",
        props:{
            parentdata:{
                type:String,
                default:""
            }
        }
    }
</script>

觀看結果：

父元件傳入子元件的值就被顯示出來了

子傳父

首先在子元件中定義一個事件，並且使用emit傳送給父元件，在範例中子元件使用的click事件觸發傳送自定義事件(sendmsg)

<template>
    <div>
        <button @click="childmsg">點我試試</button>
    </div>
</template>

<script>
    export default {
        name:"child",
        data(){
            return{
                msg:"This is the first word from child"
            }
        },
        methods:{
            childmsg(){
                this.$emit('sendmsg',this.msg)
            }
        }
    }
</script>

emit使用方法
this.$emit(‘自定義事件名’,所需要傳的值)

在父元件中需要定義方法(getmsg)接受自定義事件(sendmsg)：

<template>
    <div>
        <child :parentdata="parentdata" @sendmsg="getmsg"></child>
    </div>
</template>

<script>
    import child from './child.vue' 
    export default {
        name:'parent',
        components:{
            child
        },
        methods:{
            getmsg(val){
                console.log(val)
            }
        }
    }
</script>

在定義方法時直接在函數中設定形參接受子元件傳入的值（getmsg(val)）
在控制檯就可以看見列印結果This is the first word from child

2.$parent / children

在使用這個方法時，大家可以先在父元件中列印出來$children,幫助大家理解
程式碼如下

mounted(){
            console.log(this.$children)
        }

可以看到，子元件被列印出來了

只要找到元件物件對應的屬性，就可使用

mounted(){
            alert(this.$children[0].msg)
        }

可以看到結果

注意，這種方法不僅可以呼叫資料，也可以使用子元件的方法！（但不可以直接呼叫，這個接下來的文章再說）

如果是子元件使用父元件的資料，可以同樣的流程

3.$ref

ref可以讓父元件更加便利地取到想要的子元件，其中原理和第二種方法相同，都是取到元件物件

在父元件中定義ref

<template>
    <div>
        <child ref="childselected"></child>
    </div>
</template>

在父元件中取值：

mounted(){
            alert(this.$refs.childselected.msg)
        }

可以看到相同的結果：

總結

***本篇主要講解了Vue專案中父子元件傳值的三種方法：
props/$emit
子元件通過v-bind接收父元件的值
父元件通過接收emit傳送的事件接收子元件的值
$parent/children
直接獲取元件物件來取值
$ref
定義屬性名獲取元件物件值

到此這篇關於Vue父子元件傳值的文章就介紹到這了,更多相關Vue父子元件傳值內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！