# Vue3 版本隐私对话框调用方式
在 Vue3 中，使用 ref 和组件调用的方式有所变化。以下是修改后的实现：
## 1. 模板部分
<template>
<!-- 其他内容 -->
<lq-privacy-dialog ref="privacyDialog" />
</template>## 2. Composition API 写法
<script setup>
import { ref } from 'vue'
// 获取对话框引用
const privacyDialog = ref(null)
// 检查隐私权限的方法
const checkPrivacy = () => {
privacyDialog.value?.check({
// 已同意
agree: () => {
// 隐私接口调用逻辑，例如获取位置
uni.getLocation({
success(e) {
console.log(e)
}
})
},
// 不同意
disAgree: () => {
console.log('不同意')
}
})
}
</script>## 3. Options API 写法
<script>
export default {
methods: {
checkPrivacy() {
this.$refs.privacyDialog.check({
// 已同意
agree: () => {
// 隐私接口调用逻辑，例如获取位置
uni.getLocation({
success(e) {
console.log(e)
}
})
},
// 不同意
disAgree: () => {
console.log('不同意')
}
})
}
}
}
</script>## 4. 使用方式
在模板中调用：
<button @click="checkPrivacy">请求权限</button>## 注意事项
1. 确保 lq-privacy-dialog 组件已经适配 Vue3
2. 在 Composition API 中使用 ref 时，需要通过 .value 访问组件实例
3. 使用可选链操作符 ?. 可以避免未初始化时的错误
4. 如果使用 TypeScript，可以为 ref 添加类型声明：
const privacyDialog = ref<InstanceType<typeof LqPrivacyDialog> | null>(null)这样修改后，功能与 Vue2 版本一致，但使用了 Vue3 的推荐写法。