vue setup两种方式中的直接从父组件调用子组件中的函数和数据的方法，使用ref方式

1、直接上代码，子组件名为conform.vue，代码内容如下：

<template>
  <br/><span>{{ref_validate}}</span>
</template>

<script setup>
import { ref } from 'vue'
const ref_validate = ref('验证ref在组建上，获取子组件中的函数')
const test = (args)=>{
  console.log(args)
  ref_validate.value = args['success']
}

// 这种方式要把想要被父组件调用的内容导出去
defineExpose({ ref_validate, test })
</script>

<!--方式2-->
<!--<script >-->
<!--import { ref } from 'vue'-->
<!--export default {-->
<!--  name: 'conform',-->
<!--  setup(){-->
<!--    const ref_validate = ref('验证ref在组建上，获取子组件中的函数')-->
<!--    const test = (args)=>{-->
<!--      console.log(args)-->
<!--      ref_validate.value = args['success']-->
<!--    }-->
<!--    return {ref_validate, test}-->
<!--  }-->
<!--}-->
<!--</script>-->
<style scoped lang="less">
</style>

2、app.vue中的内容：

<template>
  <button  @click="validate_ref">主要按钮</button>
  <conform ref="validate" ></conform>

</template>

<script setup>
import conform from './components/conform.vue'
import {nextTick, ref} from "vue";

const validate = ref(null)
const validate_ref = ()=>{
    validate.value?.test({success:'验证成功了'});
    console.log(validate.value?.ref_validate);
}

</script>
<style scoped lang="less">
</style>

3、结果：

点击button后

注意ref的另一种用法：请点击参看