快捷導(dǎo)航

vue3?組合式api中?ref?和$parent?的使用方法

更新時(shí)間：2023年09月02日 11:23:06 作者：A黃俊輝A

vue3中，在組件中添加一個(gè) component ref=“xxx” ，就可以在父組件中得到子組件的 dom 對(duì)象，以及虛擬的 dom 對(duì)象，有了虛擬 dom, 我們就可以在父組件中控制子組件的顯示了，這篇文章主要介紹了vue3組合式api中ref和$parent的使用,需要的朋友可以參考下

ref 的使用

vue3中，在組件中添加一個(gè) component ref=“xxx” ，就可以在父組件中得到子組件的 dom 對(duì)象，以及虛擬的 dom 對(duì)象，有了虛擬 dom, 我們就可以在父組件中控制子組件的顯示了

ref 的使用方法

在這里插入圖片描述

vue3中ref 的特點(diǎn)

以上如果在vue2中，就可以使用子組件的對(duì)象來(lái)改變子組件的數(shù)據(jù)，和調(diào)用子組件的方法了，但是在vue3 ，這樣做還是不行的，還要做一步操作才可以，也就是要在子組件中，把父組件想用的方法或?qū)傩员┞冻鋈ゲ趴梢?/p>

在這里插入圖片描述

以上是父組件通過(guò) ref 來(lái)得到子組件的對(duì)象，進(jìn)而控制子組件中的屬性和方法那么我們通過(guò)子組件，如何去控制父組件的屬性和方法呢。那就不止一種方法了emit mitt(bus) 都是可以了，這里要說(shuō)的是和 ref 相類似的 $parent 方法$parent 可以添加在子組件中的事件參數(shù)上，參數(shù)名稱必須是 $parent，這樣在事件的回調(diào)方法中就可以，得到父組件的對(duì)象，并控制其中的屬性和方法了。同樣的道里，我們要在父組件中，把要使用的方法或?qū)傩员┞冻鰜?lái)才可以使用

下面給出一個(gè)樣例，父組件中的按鈕可以改變子組件中的屬性，并且子組件中的按鈕可以改變父組件中的

父組件

<template>
  <div class="baba">
    我是父組件， 我的資產(chǎn)是 {{money}}
    <button @click="borrow100">點(diǎn)擊我從兒子那里拿1000元</button>
    <hr/>
    <erzi ref="son"></erzi>   //變量中定義一個(gè)和 ref 同名的，就可以得到子組件的對(duì)象
  </div>
</template>
<script setup>
  import {ref} from "vue";
  import erzi from "@/views/Home/erzi.vue";
  let money = ref(100000000);
  let son = ref()   //通過(guò) ref 獲取到子組件的對(duì)象
  const borrow100 = ()=>{   //這里點(diǎn)擊了父組件的按鈕， 去改變子組件的 money  屬性
    money.value+=1000;
    son.value.money -= 1000;
  }
  defineExpose({money})	//這里是通過(guò)暴露父組件的 money 屬性， 給子組件來(lái)使用
</script>

子組件

<template>
  <div class="erzi">
    我是子組件， 我的資產(chǎn)是 {{ money }}
    <button @click="yao20($parent)">點(diǎn)擊我們父親那里拿 20 元</button>
    			//這里子組件的事件使用的 $parent 來(lái)做參數(shù)，必須使用 $parent 才可以得到父組件的對(duì)象
  </div>
</template>
<script setup>
  import {ref} from "vue";
  let money = ref(88888888);
  const yao20 = (p)=>{    //這是子組件中的事件， 觸發(fā)更改父組件的屬性
  							//根據(jù)傳參可以知道  p 就是父組件的對(duì)象
    money.value +=20;
    p.money -=20;
  }
  defineExpose({			//這里是暴露 子組件的 money屬性， 因?yàn)楦附M件需要使用，
  							//如果需要的話， 這里也可以暴露方法
    money
  })
</script>

到此這篇關(guān)于vue3 組合式api中 ref 和$parent 的使用的文章就介紹到這了,更多相關(guān)vue3 ref 和$parent 使用內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: