我需要在開槽后立即與開槽元素進行互動。我嘗試了以下方法：
<script setup lang="ts">
import { onMounted, ref } from 'vue';
const $slot = ref<HTMLSlotElement | null>(null);
onMounted(() => {
console.log($slot.value);
console.log($slot.value?.assignedElements()[0]);
}));
</script>
<template>
<div>
<slot ref="$slot"></slot>
</div>
</template>
但是，當我用開槽子渲染這個組件時，我只是進入undefined控制臺。我究竟做錯了什么？
uj5u.com熱心網友回復：
為您的插槽命名而不是參考并使用useSlot()幫助程式訪問插槽。
<script setup lang="ts">
import { useSlots, onMounted } from 'vue';
const slots = useSlots();
onMounted(() => {
if (slots && slots.$slot) {
console.log('slots.$slot()', slots.$slot());
}
});
</script>
<template>
<div>
<slot name="$slot"></slot>
</div>
</template>
一旦插槽內容由父組件提供，您會發現其中slots.$slot()包含組成插槽內容的虛擬 DOM 節點陣列
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/516214.html
標籤：javascript打字稿Vue.jsVuejs3vue-composition-api
下一篇：根據其他型別反應打字稿型別