绑定dom组件

 

defineExpose 可以用来暴露子组件的变量（例如 ref 或 reactive）和方法。这让父组件可以直接访问子组件的某些状态。

defineExpose

示例

以下是如何通过 defineExpose 暴露变量的示例：

<template>  <div>  <button @click="increment">Increment</button>  <p>Count: {{ count }}</p>  </div>  
</template>  <script setup>  
import { ref, defineExpose } from 'vue';  const count = ref(0);  function increment() {  count.value++;  
}  // 使用 defineExpose 来暴露 count 变量和 increment 方法  
defineExpose({  count,  increment,  
});  
</script>

父组件访问变量

在父组件中，可以这样使用并访问子组件暴露的变量：

<template>  <ChildComponent ref="childRef" />  <button @click="showCount">Show Count</button>  
</template>  <script setup>  
import { ref } from 'vue';  
import ChildComponent from './ChildComponent.vue';  const childRef = ref(null);  function showCount() {  if (childRef.value) {  console.log('Count from child:', childRef.value.count); // 访问子组件暴露的 count 变量  }  
}  
</script>