组件使用defineExpose暴露属性，父组件无法获取子组件属性？

Question

子组件

<template>
  <div>我是子组件</div>
</template>
<script  lang="ts" >
import { defineComponent, ref, defineExpose } from 'vue';
export default defineComponent({
  setup(props, context) {
    const message = ref<string>("我是子组件message");
    defineExpose({
      message: message
    })
    return {}
  },
});

</script>

父组件

<template>
  <test ref="testx"></test>
</template>
<script lang="ts">
import { defineComponent, onMounted, ref } from 'vue';
import test from './components/test.vue'
let testx = ref(null)

export default defineComponent({
  components: {
    test
  },
  setup(props, context) {
    onMounted(() => {
      console.log(testx.value); // 打印是null
    })
  },
});
</script>

试了一下，用setup 语法糖是可以的。那如果不用语法糖，该怎么暴露属性呢？

Answer 1

defineExpose 就setup 下的语法糖
不用 setup 用expose: ['publicMethod'],就可以

<template>
  <div>我是子组件</div>
</template>
<script  lang="ts" >
import { defineComponent, ref } from 'vue';
export default defineComponent({
  expose: ['message'],
  setup(props, context) {
    const message = ref<string>("我是子组件message");

    return {message}
  },
});

</script>