vue3 使用defineExpose暴露name属性

在 Vue 3 中，我们可以使用 `defineExpose` 方法来将组件的属性和方法暴露给父组件。具体操作如下：

1. 在组件中定义需要暴露的属性和方法：

export default {
  name: 'MyComponent',
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  },
  mounted() {
    console.log('MyComponent mounted')
  },
  // 使用 defineExpose 暴露属性和方法
  setup(props, { expose }) {
    expose({
      name: 'MyComponent',
      count: this.count,
      increment: this.increment
    })
  }
}

2. 在父组件中使用 `ref` 引入子组件，并且通过 `value` 属性获取子组件的实例对象：

<template>
  <div>
    <MyComponent ref="myComponentRef"></MyComponent>
    <button @click="handleClick">调用子组件方法</button>
  </div>
</template>

<script>
import { ref } from 'vue'
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  },
  setup() {
    const myComponentRef = ref(null)

    function handleClick() {
      myComponentRef.value.increment()
    }

    return {
      myComponentRef,
      handleClick
    }
  }
}
</script>

这样，我们就可以在父组件中通过 `myComponentRef.value` 来获取子组件的实例对象，并且可以调用子组件的方法和获取子组件的属性。其中，`expose` 方法暴露的属性和方法会被挂载在 `value` 属性下。注意，`expose` 方法只能在 `setup` 函数中使用。