亚洲综合av一区二区三区不卡,一区,二区,三区色视频 ,在线日本妇人成熟免费

快捷導(dǎo)航

vue中ref實(shí)現(xiàn)子向父?jìng)髦档氖纠?/h1>

更新時(shí)間：2023年01月25日 08:58:50 作者：巧克力小貓?jiān)?

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

前言

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

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

這里附上涉及到的知識(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ù)中打印)：

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

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

2.2 自定義事件

我們?cè)趯W(xué)傳統(tǒng)的子向父?jìng)髦禃r(shí)，涉及到了自定義事件。本節(jié)的方法依舊余自定義事件有聯(lián)系，所以在正式了解如何用ref實(shí)現(xiàn)子向父?jìng)髦禃r(shí)我們先來(lái)復(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寫(xiě)的這種作法，本質(zhì)上是對(duì)自定義事件的不了解。

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

在A(yíng)pp中為子組件設(shè)置一個(gè)自定義事件：這里要說(shuō)的是，==給誰(shuí)綁定的自定義事件，就去找誰(shuí)調(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ù)）

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

三，靈活性

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

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

四，注意

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

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

后記

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

您可能感興趣的文章:

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

目錄

前言

一，基礎(chǔ)代碼

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

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

2.2 自定義事件

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

三，靈活性

四，注意

后記

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線(xiàn)小工具

亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

目錄

前言

一，基礎(chǔ)代碼

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

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

2.2 自定義事件

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

三，靈活性

四，注意

后記

相關(guān)文章

最新評(píng)論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線(xiàn)小工具

三，靈活性

四，注意