vue父子組件間如何傳值

本文小編為大家詳細(xì)介紹“vue父子組件間如何傳值”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“vue父子組件間如何傳值”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來(lái)學(xué)習(xí)新知識(shí)吧。

1. 父組件傳遞方法

首先，在Vue中父組件向子組件傳遞方法的方式很多，我們先來(lái)看一個(gè)最簡(jiǎn)單的例子。

首先，我們?cè)诟附M件中定義一個(gè)方法：

methods: {
    hello(){
        console.log('hello');
    }
}

接下來(lái)，我們需要將這個(gè)方法傳遞給子組件。在Vue中，父組件可以通過(guò)props向子組件傳遞數(shù)據(jù)以及方法。

在父組件中，我們需要通過(guò)以下方式來(lái)完成傳遞方法：

<child-component :hello="hello"></child-component>

在子組件中，我們需要通過(guò)props來(lái)接收父組件傳遞過(guò)來(lái)的方法：

props: {
    hello: Function
}

接著，我們需要在子組件中調(diào)用方法：

<button @click="hello()">Click me</button>

這樣，我們就能夠在子組件中成功調(diào)用父組件傳遞的方法了。

2. 子組件向父組件傳遞方法

接下來(lái)，我們介紹子組件向父組件傳遞方法的方式。跟父組件向子組件傳遞方法的方式相比，這種方式就要復(fù)雜一些。

首先，在子組件中我們定義一個(gè)方法：

methods: {
    send(){
        this.$emit('demo-event');
    }
}

在這里，我們定義了一個(gè)send方法，該方法通過(guò)$emit觸發(fā)了一個(gè)名為“demo-event”的事件。需要注意的是，在Vue中我們傳遞方法時(shí)不直接傳遞函數(shù)本身，而是通過(guò)事件的方式來(lái)傳遞。

接下來(lái)，我們需要在父組件中監(jiān)聽(tīng)該事件，具體代碼如下：

<child-component @demo-event="handleDemo"></child-component>

在這里，我們通過(guò)@demo-event來(lái)監(jiān)聽(tīng)子組件觸發(fā)的“demo-event”事件，并在父組件中定義了一個(gè)事件處理函數(shù)handleDemo。

接著，我們需要在父組件中定義handleDemo方法：

methods: {
    handleDemo(){
        console.log('demo event received');
    }
}

這樣，在子組件中觸發(fā)send方法時(shí)，就會(huì)觸發(fā)“demo-event”事件，并進(jìn)而執(zhí)行handleDemo方法。

讀到這里，這篇“vue父子組件間如何傳值”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識(shí)點(diǎn)還需要大家自己動(dòng)手實(shí)踐使用過(guò)才能領(lǐng)會(huì)，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注億速云行業(yè)資訊頻道。