最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

vue中ref實(shí)現(xiàn)子向父?jìng)髦档氖纠?/h1>
 更新時(shí)間：2023年01月25日 08:58:50   作者：巧克力小貓?jiān)? 
本文主要介紹了vue中ref實(shí)現(xiàn)子向父?jìng)髦档氖纠?，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

前言

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

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

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

其中，第一篇文章中有涉及到子向父?jìng)髦档膫鹘y(tǒng)方式。

一，基礎(chǔ)代碼

這里放上我的App（父組件）和Son（子組件）的代碼，后續(xù)所有的改動(dòng)在此基礎(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: '巧克力小貓?jiān)?
        }
    }
}
</script>

<style>

</style>

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

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

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

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

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

2.2 自定義事件

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

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

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

如：

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

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

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

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

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

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

在子組件中觸發(fā)自定義事件：并且把son中的msg傳給了該自定義事件qklxmy。（傳的msg用于執(zhí)行自定義事件的回調(diào)函數(shù)）

上述過程，給子組件定義了自定義事件，又在子組件中調(diào)用。由于子組件中自定義事件的回調(diào)寫在父組件中，所以父組件可以收到子組件的傳值。

三，靈活性

在前面有說，這么寫會(huì)更加靈活。之所以靈活，是因?yàn)槲覀兛梢栽阢^子函數(shù)中使用這種方式傳值，如：

我們還可以寫定時(shí)器來設(shè)置什么時(shí)候接到傳值。

四，注意

通過此方式綁定自定義事件，回調(diào)要么配置在methos中，就是如上方法，要么就用箭頭函數(shù)。

、如果不用箭頭函數(shù)，this的指向會(huì)出現(xiàn)問題。

后記

到此這篇關(guān)于vue中ref實(shí)現(xiàn)子向父?jìng)髦档氖纠奈恼戮徒榻B到這了,更多相關(guān)vue ref子向父?jìng)髦祪?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論

大新县| 襄汾县| 上栗县| 涟水县| 尉氏县| 辽阳县| 安新县| 报价| 双鸭山市| 化德县| 同德县| 荥经县| 古丈县| 大姚县| 尉氏县| 佛坪县| 十堰市| 甘泉县| 胶州市| 疏附县| 台州市| 登封市| 马龙县| 宣化县| 林口县| 林芝县| 房山区| 宁安市| 隆化县| 诏安县| 海宁市| 柳林县| 时尚| 商水县| 牙克石市| 牙克石市| 久治县| 手游| 梓潼县| 泾阳县| 卫辉市|