欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue父組件調(diào)用子組件方法報(bào)錯(cuò)問(wèn)題及解決

 更新時(shí)間：2022年09月05日 08:39:49   作者：小劉加油！  
這篇文章主要介紹了vue父組件調(diào)用子組件方法報(bào)錯(cuò)問(wèn)題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教

vue父組件調(diào)用子組件方法報(bào)錯(cuò)

在父組件定義了一個(gè)tab標(biāo)簽頁(yè)，每一個(gè)標(biāo)簽頁(yè)下面都調(diào)用不同的組件，

如下圖所示：

子組件中定義的方法：

setup() {
	const getList = () =>{
		const date = moment(new Date()).format('YYYY-MM')
		loading.value = true
		apiGetPageList({
                salaryDate: date,
                page: state.pagination.page,
                limit: state.pagination.limit,
                jobNo: state.formState.searchValue ? state.formState.searchValue : null
            }).then((res: any)=> {
                if (res.data.status == 200) {
                    state.dataSource = res.data.data.rows
                    state.pagination.total = res.data.data.total
                } else {
                    Message.error(res.data.message ? res.data.message : "獲取數(shù)據(jù)失敗")
                }
            }).finally(()=>{
                loading.value = false
            })
	}
	return {
		getList
	}
	
}

父組件中使用tab標(biāo)簽頁(yè)的change方法，每次點(diǎn)擊不同tab頁(yè)的時(shí)候，都會(huì)調(diào)用該子組件的獲取列表數(shù)據(jù)的接口。

一開(kāi)始的思路是：在父組件中調(diào)用子組件的時(shí)候使用ref屬性，通過(guò)ref拿到子組件的方法，然后在change方法中進(jìn)行調(diào)用。但在實(shí)際開(kāi)發(fā)中，卻出現(xiàn)了問(wèn)題，切換到tab頁(yè)時(shí)，控制臺(tái)會(huì)報(bào)錯(cuò)，如下所示：

這個(gè)是因?yàn)楫惒綀?zhí)行的原型，子組件還沒(méi)渲染完就調(diào)用方法會(huì)出現(xiàn)這樣的情況。在網(wǎng)上百度了下解決方法，只需要在子組件中定義的方法中加上this.$nextTick就可以解決。

這種方法的確可以，但我試了試另一種方法：在父組件中的change方法中加上nextTick，想驗(yàn)證下是否能夠解決，結(jié)果是能夠正常調(diào)用。

代碼如下所示：

setup() {
	const changeTab = (active: any) => {
            switch (active) {
                case "2":
                    console.log(33333,areaWorkDay)
                    nextTick(()=>{
                        areaWorkDay.value.editTableData = {}
                        areaWorkDay.value.getPageList()
                        areaWorkDay.value.formRef.resetFields()
                    })
                    break;
                case "3":
                    console.log(111,monthSalaryRef)
                    // monthSalaryRef.value.$emit('getList')
                    nextTick(()=>{
                        monthSalaryRef.value.editTableData = {}
                        monthSalaryRef.value.getList()
                        monthSalaryRef.value.monthRef.resetFields()
                    })
                    break;
            }
        }
       	return {
       		changeTab
		}
}

這樣也可以解決父組件調(diào)用子組件的時(shí)候，因?yàn)楫惒綀?zhí)行，子組件方法還沒(méi)初始化完成，導(dǎo)致控制臺(tái)報(bào)錯(cuò)的問(wèn)題。

vue父組件調(diào)用子組件方法及遇到的問(wèn)題

在子組件methods選項(xiàng)中定義方法method()，在父組件中引用子組件，并在子組件標(biāo)簽中定義ref=‘xxx’，使用this.$refs.xxx.method()調(diào)用子組件方法。

但chrome控制臺(tái)報(bào)錯(cuò)該方法undifined，原因是因?yàn)槭褂胷ef調(diào)用子組件是調(diào)用的實(shí)例，但調(diào)用時(shí)該實(shí)例還未加載完，因此調(diào)用的方法undifined。

解決方法：在父組件中調(diào)用時(shí)，先加載完組件實(shí)例再調(diào)用方法：

this.$nextTick( () => {
?? ?this.$refs.xxx.method()
} )

以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論