vue父子組件間如何傳值

本文小編為大家詳細介紹“vue父子組件間如何傳值”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue父子組件間如何傳值”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

1. 父組件傳遞方法

首先，在Vue中父組件向子組件傳遞方法的方式很多，我們先來看一個最簡單的例子。

首先，我們在父組件中定義一個方法：

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

接下來，我們需要將這個方法傳遞給子組件。在Vue中，父組件可以通過props向子組件傳遞數據以及方法。

在父組件中，我們需要通過以下方式來完成傳遞方法：

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

在子組件中，我們需要通過props來接收父組件傳遞過來的方法：

props: {
    hello: Function
}

接著，我們需要在子組件中調用方法：

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

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

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

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

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

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

在這里，我們定義了一個send方法，該方法通過$emit觸發了一個名為“demo-event”的事件。需要注意的是，在Vue中我們傳遞方法時不直接傳遞函數本身，而是通過事件的方式來傳遞。

接下來，我們需要在父組件中監聽該事件，具體代碼如下：

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

在這里，我們通過@demo-event來監聽子組件觸發的“demo-event”事件，并在父組件中定義了一個事件處理函數handleDemo。

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

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

這樣，在子組件中觸發send方法時，就會觸發“demo-event”事件，并進而執行handleDemo方法。

讀到這里，這篇“vue父子組件間如何傳值”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。