Vue3组合式的父组件和子组件的一些区别

Vue3组合式的父组件和子组件的一些区别

非语法糖：

父组件

<template>
  <div class="">
    <test ref="testref"></test>
    <br>
    <el-button @click="fn">点我</el-button>
  </div>
</template>

<script setup lang="ts">
import test from './components/test.vue'

//组件命名-----
defineOptions({name:""})
const testref=ref()
const fn=()=>{
  testref.value.fn(3434)
}
</script>

<style lang="scss" scoped>

</style>

子组件

<template>
  <div class="">111</div>
</template>



<script>
/** 
 * 盒子
 *  */

export default defineComponent({
  setup() {
    function fn(num){
      console.log(num);

    }
    return {
      fn,
    };
  },
});
</script>

<style lang="scss" scoped></style>

语法糖：

父组件

<template>
  <div class="">
    <test ref="testref"></test>
    <br>
    <el-button @click="fn">点我</el-button>
  </div>
</template>

<script setup lang="ts">
import test from './components/test.vue'

//组件命名-----
defineOptions({name:""})
const testref=ref()
const fn=()=>{
  testref.value.fn(3434)
}
</script>

<style lang="scss" scoped>

</style>

子组件

<template>
  <div class="">111</div>
</template>



<script setup lang="ts">

//组件命名-----
defineOptions({name:""})
const testref=ref()
const fn=(num)=>{
  console.log(num);
  
}
defineExpose({
  fn,
})
</script>

<style lang="scss" scoped></style>

总结

非语法糖写法中，只要子组件的方法通过return出来，父组件就可以用ref值去用方法

语法糖写法中，只要子组件的方法，需要用defineExpose出来，父组件才可以用ref值去用方法