vue3 组合式api中 ref 和$parent 的使用

这篇具有很好参考价值的文章主要介绍了vue3 组合式api中 ref 和$parent 的使用。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

ref 的使用

vue3中，在组件中添加一个 component ref=“xxx” ，就可以在父组件中得到子组件的 dom 对象，以及虚拟的 dom 对象，有了虚拟 dom, 我们就可以在父组件中控制子组件的显示了

ref 的使用方法

vue3 组合式api中 ref 和$parent 的使用,vue.js,javascript,前端

vue3中ref 的特点

以上如果在vue2中，就可以使用子组件的对象来改变子组件的数据，和调用子组件的方法了，但是在vue3 ，这样做还是不行的，还要做一步操作才可以，也就是要在子组件中，把父组件想用的方法或属性暴露出去才可以
vue3 组合式api中 ref 和$parent 的使用,vue.js,javascript,前端

以上是父组件通过 ref 来得到子组件的对象，进而控制子组件中的属性和方法
那么我们通过子组件，如何去控制父组件的属性和方法呢。那就不止一种方法了
emit mitt(bus) 都是可以了，这里要说的是和 ref 相类似的 $parent 方法
$parent 可以添加在子组件中的事件参数上，参数名称必须是 $parent，这样在事件的回调方法中就可以，得到父组件的对象，并控制其中的属性和方法了。
同样的道里，我们要在父组件中，把要使用的方法或属性暴露出来才可以使用

下面给出一个样例，父组件中的按钮可以改变子组件中的属性，并且子组件中的按钮可以改变父组件中的

父组件

<template>
  <div class="baba">
    我是父组件， 我的资产是 {{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>

子组件文章来源地址https://www.toymoban.com/news/detail-689226.html

<template>
  <div class="erzi">
    我是子组件， 我的资产是 {{ money }}
    <button @click="yao20($parent)">点击我们父亲那里拿 20 元</button>
    			//这里子组件的事件使用的 $parent 来做参数，必须使用 $parent 才可以得到父组件的对象
  </div>
</template>

<script setup>
  import {ref} from "vue";
  let money = ref(88888888);
  const yao20 = (p)=>{    //这是子组件中的事件， 触发更改父组件的属性
  							//根据传参可以知道  p 就是父组件的对象
    money.value +=20;
    p.money -=20;
  }
  defineExpose({			//这里是暴露 子组件的 money属性， 因为父组件需要使用，
  							//如果需要的话， 这里也可以暴露方法
    money
  })
</script>