vue学习（1）vue3/2下的 父子/爷孙组件间方法调用

我这里只写父子/爷孙组件间方法调用（传值的那啥emit，on， eventbus我就不在这里写了）

vue2中的写法 爷组件控制孙组件的锚点跳转（父子组件间方法调用类似）

// 孙组件
<template>
    <div ref="item">
</template>
methods:{
nav (index) {
    this.$refs.item[index].scrollIntoView(true)
    }
]

// 爷组件
methods:{ 
    //  problemType 为父组件
    this.$refs.problemType.$children[0].navTo(index)
}

vue3.2中的写法（defineExpose可以暴露属性和方法）

// 孙组件
<script lang='ts' setup>
const sonMethod =  () :void => {
  // 子组件方法
}
const sonData = ref<string>('这是子组件数据')
defineExpose({sonMethod, sonData }) // 必须在子组件中暴露出来
</script>

// 父组件
<template>
    <Son ref='son' />
    <div @click='controlSon'></div>
</template>
<script lang='ts' setup>
const son = ref<any>(null)
const controlSon = () :void => {
    son.value.sonMethod()
}
</script>