ref 的使用

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

ref 的使用方法

vue3中ref 的特點

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

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

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

父組件

<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>

子組件文章來源地址http://www.zghlxwxcb.cn/news/detail-689226.html

<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>

到了這里，關(guān)于vue3 組合式api中 ref 和$parent 的使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！