vue3+ts中子组件中给 uni-popup 添加 ref 属性,怎么在父组件中通过 $refs 访问 uni-popup,不用this.
时间: 2024-02-01 21:14:08 浏览: 24
你可以在子组件中使用 `inject` 把 uni-popup 注入到子组件中,然后在父组件中就可以通过 $refs 访问子组件中的 uni-popup 了。
首先,在子组件中将 uni-popup 注入到子组件中:
```vue
<template>
<uni-popup ref="popupRef">...</uni-popup>
</template>
<script lang="ts">
import { defineComponent, inject } from 'vue';
export default defineComponent({
setup() {
const popupRef = inject('popupRef');
return {
popupRef,
};
},
});
</script>
```
然后,在父组件中通过 $refs 访问子组件中的 uni-popup:
```vue
<template>
<child-component></child-component>
</template>
<script lang="ts">
import { defineComponent, ref } from 'vue';
import UniPopup from 'uni-popup';
export default defineComponent({
components: {
ChildComponent,
},
setup() {
const popupRef = ref<UniPopup>();
return {
popupRef,
};
},
mounted() {
console.log(this.$refs.popupRef); // undefined
// 因为子组件还未渲染完毕,$refs 中还没有 popupRef
},
methods: {
openPopup() {
this.popupRef.value.open();
},
},
});
</script>
```