我在 onMounted() 生命周期掛鉤中啟動變數（制表符）時遇到問題，因此當我將制表符實體作為道具傳遞給子組件時，它始終為空，因為我認為啟動發生在子組件之后組件被創建。
簡單地說：我想使用一個在父組件中宣告和啟動的實體，在子組件中。
Tabulator 要求我在 onMounted() 鉤子中啟動它，所以我無法擺脫它。
父組件
<template>
<div>
<AddRowButton :tabulator="tabulator" />
<div ref="table"></div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { TabulatorFull as Tabulator } from 'tabulator-tables'
import AddRowButton from '@/components/buttons/AddRowButton.vue'
interface Props {
data: Array
}
const props = withDefaults(defineProps<Props>(), {
data: Array
})
let tabulator = null
const table = ref(null)
onMounted(() => {
tabulator = new Tabulator(table.value, {
data: props.data,
columns: [
{ title: 'Id', field: 'id', sorter: 'number' },
{ title: 'Name', field: 'name', sorter: 'string' },
{ title: 'Email', field: 'email', sorter: 'string' },
{ title: 'Date', field: 'date', sorter: 'date' }
]
})
})
子組件
<template>
<button @click="addNewRow">Add row</button>
</template>
<script setup lang="ts">
import { TabulatorFull as Tabulator } from 'tabulator-tables'
defineProps({
tabulator: Tabulator
})
function addNewRow(): void {
try {
tabulator.addData({}, true) // Tabulator always null
} catch (error) {
console.log(error.message)
}
}
</script>
謝謝！
uj5u.com熱心網友回復：
您將制表符道具定義為型別 null
defineProps({
tabulator: null
})
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/437499.html
上一篇：無法找到賽普拉斯組件內的定位器