快捷導(dǎo)航

vue中ref實現(xiàn)子向父傳值的示例

更新時間：2023年01月25日 08:58:50 作者：巧克力小貓猿

本文主要介紹了vue中ref實現(xiàn)子向父傳值的示例，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

目前我們熟知的子向父傳值有兩種方式：一種是在父組件中定義函數(shù)，然后將函數(shù)利用props傳給子組件，子組件調(diào)用時父組件可以收到子組件的參數(shù)；另一種利用自定義事件，給子組件在父組件中綁定一個自定義事件，子組件利用$emit方式觸發(fā)該自定義事件時可以將數(shù)據(jù)傳給父親。

今天介紹的是通過ref的方法實現(xiàn)子組件傳值給父組件。這種方式比前兩種方式用起來更加靈活。

這里附上涉及到的知識點鏈接，如有需要可以復(fù)習(xí)：

其中，第一篇文章中有涉及到子向父傳值的傳統(tǒng)方式。

一，基礎(chǔ)代碼

這里放上我的App（父組件）和Son（子組件）的代碼，后續(xù)所有的改動在此基礎(chǔ)之上：
（APP）

<template>
  <div>
    <h2>子組件的msg:</h2>
    <Son></Son>
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
    name: 'App',
    components: {
        Son
    }
}
</script>

<style>

</style>

（Son）

<template>
  <div>
    <h2>我是子組件</h2>
  </div>
</template>

<script>
export default {
    name: 'Son',
    data() {
        return {
            msg: '巧克力小貓猿'
        }
    }
}
</script>

<style>

</style>

二，層次遞進(jìn)的講解用法

2.1 給子組件設(shè)置ref

這里我們給子組件設(shè)置一個ref，并查看父組件中的this.$refs中有什么（在mounted鉤子函數(shù)中打印)：

打印出來的結(jié)果是：

可以看到，此時ref對象中已經(jīng)有了Son，并且類型是vc（組件）。既然在ref對象中那我們可以通過ref去操作它。

2.2 自定義事件

我們在學(xué)傳統(tǒng)的子向父傳值時，涉及到了自定義事件。本節(jié)的方法依舊余自定義事件有聯(lián)系，所以在正式了解如何用ref實現(xiàn)子向父傳值時我們先來復(fù)習(xí)下自定義事件。

自定義事件的定義:使用vm.$on這個api：

vm.$on('自定義事件名',自定義事件被觸發(fā)后調(diào)用的回調(diào)函數(shù))

如：

 vm.$on( 'aa', function () {
    console.log( 'aa' )
  })

自定義事件的觸發(fā)：使用vm.$emit這個api:

vm.$emit('自定義事件名',自定義事件需要用到的參數(shù)1，參數(shù)2，參數(shù)n)

一個是定義，一個是觸發(fā)。我在學(xué)習(xí)vue視頻的時候看到很多人不理解用ref寫的這種作法，本質(zhì)上是對自定義事件的不了解。

2.3 給子組件設(shè)置一個自定義事件

在App中為子組件設(shè)置一個自定義事件：這里要說的是，==給誰綁定的自定義事件，就去找誰調(diào)用。==現(xiàn)在給子組件son綁定了一個自定義事件，那么就要在子組件中去調(diào)用它。并且如下圖可知，給子組件設(shè)置的自定義事件名為qklxmy，一旦觸發(fā)，則調(diào)用回調(diào)函數(shù)getmsg。