Vue3.2+TS的defineExpose的应用

道长道长IOT2023-08-18 22:07

defineExpose通俗来讲，其实就是讲子组件的方法或者数据，暴露给父组件进行使用，这样对组件的封装使用，有很大的帮助，那么defineExpose应该如何使用，下面我来用一些实际的代码，带大家快速学会defineExpose的使用

1.子组件：子组件有方法increaseCount，和数据count，现在我们将这他们全部暴露出去。

ts 复制代码

<template>
  <div>
    <h1>子组件, 对defineExpose进行处理</h1>
    <button @click="increaseCount">Increase Count</button>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const count = ref(0)
const increaseCount = () => {
  count.value++;
};
defineExpose({
  count,
  increaseCount
})

</script>
<style scoped lang="less">
</style>

2.父组件：我们为子组件定义ref为childexpose，这里有一个问题，如果这样let childexpose = ref(null)声明，ts会提示"childexpose.value"可能为 "null"。所以直接let childexpose = ref()，ts就不会报错

在调用方法的时候，直接childexpose.value.increaseCount()就可以拿到他的方法，并且子组件的数据也会同步更新

ts 复制代码

<template>
  <div>
    <dExpose ref="childexpose"></dExpose>
    <a-button type="primary" status="warning" @click="getChild">Primary</a-button>
    {{nums}}
  </div>
</template>

<script setup lang="ts">
import { ref,onActivated  } from "vue";
import dExpose from './components/defineExpose.vue'

let nums = ref(null)
let childexpose = ref()

// 调用子组件的方法
const getChild = ()=>{
  childexpose.value.increaseCount()
  nums.value = childexpose.value.count  
}

</script>
<style scoped lang="less">
ul {
  list-style-type: none;
  li {
    height: 30px;
    line-height: 30px;
    background-color: aqua;
    margin-bottom: 10px;
  }
}
</style>