vue3中的 $ref 和 $parent

效果图

效果图结合全部代码看就好理解了

$ref

1. 在父组件引入时绑定ref ，例如<Son ref="son"></Son>
2. 父组件获取子组件Son的实例，获取子组件dom与实例，变量名需要与标签上的ref值一致

// 获取子组件dom与实例，变量名需要与子组件的ref一致
// Ref<InstanceType<typeof Son> | null> 表示它可以持有Son组件的实例类型或null。
let son = ref<InstanceType<typeof Son> | null>(null);

3. 获取子组件的属性和方法，需要在子组件使用defineExpose方法对外暴露

defineExpose({
    money, // 属性
    setMoney // 方法
})

4. 获取子组件参数或调用子组件方法，示例

let son = ref<InstanceType<typeof Son> | null>(null);

const getSonMoney = ():void => {
	// son?.value?.money获取子组件的属性
    sonMoney.value = <number>son?.value?.money;
}

const setSonMoney = ( num: number ):void => {
    money.value += num;
    // 调用子组件的方法
    son.value?.setMoney(num);
    getSonMoney();
}

$parent

子组件获取父组件的属性与方法，需要传入$parent，同时，父组件也需要使用defineExpose 对外暴露，才能使用

<el-button @click="getParentMoney($parent)" type="primary">查看父亲的余额</el-button>

const getParentMoney = (parent):void => {
    alert(`父亲余额: ${parent.money}`)
}

全部代码

父组件

<template>
  <div>
    <h1>父亲余额：{{ money }}</h1>
    <el-button @click="getSonMoney" type="success">查看儿子的余额</el-button>
    <el-button @click="setSonMoney(500)" type="info">借儿子500</el-button>

    <hr>
    <Son ref="son"></Son>
    <h5>儿子余额:{{ sonMoney }}</h5>
  </div>
</template>

<script lang='ts' setup>
import Son from './components/son.vue';
import { ref } from 'vue';

let money = ref<number>(50000);
let sonMoney = ref<number>(0);

// 获取子组件dom与实例，变量名需要与子组件的ref一致
// Ref<InstanceType<typeof Son> | null> 表示它可以持有Son组件的实例类型或null。
let son = ref<InstanceType<typeof Son> | null>(null);

const getSonMoney = ():void => {
    sonMoney.value = <number>son?.value?.money;
}

const setSonMoney = ( num: number ):void => {
    money.value += num;
    son.value?.setMoney(num);
    getSonMoney();
}

const car = ():void => {
    alert('宝马740');
}

defineExpose({
    money,
    car
})

</script>
<style lang='scss' scoped>
</style>

子组件

<template>
  <div>
    <h3>儿子</h3>
    <el-button @click="getParentMoney($parent)" type="primary">查看父亲的余额</el-button>
    <el-button @click="getCar($parent)" type="primary">跟父亲借车</el-button>

  </div>
</template>

<script lang='ts' setup>
import { ref } from 'vue';
let money = ref<number>(3006);

const setMoney = ( num:number ):void => {
    money.value -= num;
}

const getParentMoney = (parent):void => {
    alert(`父亲余额: ${parent.money}`)
}

const getCar = (parent):void => {
    parent.car()
}

// 父组件要获取该组件的属性和方法需要暴露出去
defineExpose({
    money,
    setMoney
})
</script>
<style lang='scss' scoped>
</style>