defineExpose的示例

defineExpose是Vue 3中的一个新特性，它用于将组件实例中的方法或属性暴露给其子组件。通过使用defineExpose，我们可以在组件内部定义一些方法或属性，并使其可以在子组件中直接访问和使用。

下面是一个defineExpose的示例：

// 父组件
<template>
  <div>
    <ChildComponent />
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';
import ChildComponent from './ChildComponent.vue';

export default defineComponent({
  components: {
    ChildComponent,
  },
  setup() {
    const message = ref('Hello from Parent');

    // 将message暴露给子组件
    const expose = {
      message,
    };

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

// 子组件
<template>
  <div>
    <p>{{ expose.message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  inject: ['expose'], // 注入父组件暴露的属性和方法
  methods: {
    changeMessage() {
      this.expose.message = 'New Message from Child'; // 修改父组件的message值
    },
  },
});
</script>

在上面的示例中，父组件通过defineExpose将message属性暴露给了子组件。子组件通过inject注入了父组件暴露的属性和方法，并可以直接访问和修改父组件的message值。这样，子组件就可以直接使用父组件的属性和方法，实现了组件之间的数据共享和通信。