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

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

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

ref 的使用

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

ref 的使用方法

在這里插入圖片描述

vue3中ref 的特點

以上如果在vue2中，就可以使用子組件的對象來改變子組件的數(shù)據(jù)，和調用子組件的方法了，但是在vue3 ，這樣做還是不行的，還要做一步操作才可以，也就是要在子組件中，把父組件想用的方法或屬性暴露出去才可以

在這里插入圖片描述

以上是父組件通過 ref 來得到子組件的對象，進而控制子組件中的屬性和方法那么我們通過子組件，如何去控制父組件的屬性和方法呢。那就不止一種方法了emit mitt(bus) 都是可以了，這里要說的是和 ref 相類似的 $parent 方法$parent 可以添加在子組件中的事件參數(shù)上，參數(shù)名稱必須是 $parent，這樣在事件的回調方法中就可以，得到父組件的對象，并控制其中的屬性和方法了。同樣的道里，我們要在父組件中，把要使用的方法或屬性暴露出來才可以使用

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

父組件

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

子組件

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

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

您可能感興趣的文章: