淺談Vue.js 關于頁面加載完成后執(zhí)行一個方法的問題

來源：懂視網(wǎng) 責編：小采時間：2020-11-27 21:59:29

淺談Vue.js 關于頁面加載完成后執(zhí)行一個方法的問題

淺談Vue.js 關于頁面加載完成后執(zhí)行一個方法的問題:首先我們會想著在mounted或者created里面加入想要執(zhí)行的方法，但是有的時候會遇到在你執(zhí)行這個方法的時候，頁面還并沒有被渲染完成，所以就會出現(xiàn)這個方法在匹配頁面標簽報錯的情況。解決思路： 1.通過子頁面調用父頁面的方法，因為在子頁面開始渲染的時候，

推薦度：

點擊下載本文 文檔為doc格式

導讀淺談Vue.js 關于頁面加載完成后執(zhí)行一個方法的問題:首先我們會想著在mounted或者created里面加入想要執(zhí)行的方法，但是有的時候會遇到在你執(zhí)行這個方法的時候，頁面還并沒有被渲染完成，所以就會出現(xiàn)這個方法在匹配頁面標簽報錯的情況。解決思路： 1.通過子頁面調用父頁面的方法，因為在子頁面開始渲染的時候，

首先我們會想著在mounted或者created里面加入想要執(zhí)行的方法，但是有的時候會遇到在你執(zhí)行這個方法的時候，頁面還并沒有被渲染完成，所以就會出現(xiàn)這個方法在匹配頁面標簽報錯的情況。

解決思路：

1.通過子頁面調用父頁面的方法，因為在子頁面開始渲染的時候，你的父頁面肯定是已經(jīng)渲染好了的，前提這里的方法中是去找尋父頁面的標簽。

2.直接在本頁面監(jiān)視一個參數(shù)，發(fā)現(xiàn)參數(shù)被初始化了，說明頁面也已經(jīng)加載完成，因為你的頁面用到了這個參數(shù)。

方法1案例：tab頁里的子頁面如果沒有內容就隱藏

父頁面代碼

<el-tabs v-model="initTab" type="card">
 <el-tab-pane label="1信息" name="tab1">
 1
 </el-tab-pane>
 <el-tab-pane label="2報告" name="tab2">
 2
 </el-tab-pane>
 <el-tab-pane label="3信息" name="tab3">
 3
 </el-tab-pane>
 <el-tab-pane label="4信息" name="tab4">
 <ziyemian-group @tabShow="tabShow" title="4信息" v-if="detailInfo">
 </ziyemian-group>
 
 </el-tab-pane>
 <el-tab-pane label="5信息" name="tab5">
 5
 </el-tab-pane>
 <el-tab-pane label="其它信息" name="tab6">
 6
 </el-tab-pane>
</el-tabs>
 
import ZiyemianGroup from './ZiyemianGroup.vue'
components: {
 ZiyemianGroup
},
data () {
 return {
 detailInfo: {}，
 initTab：‘tab1'
 }
}
methods: {
 tabShow: (data) => {
 document.getElementsByClassName('el-tabs__item').item(4).style.display = data
 },
}

然后是ZiyemianGroup.vue的代碼，這里主要就是方法調用，頁面自己搞定

data () {
 return {
 list: []
 }
},
mounted () {
 this.init()
},
methods: {
 init() {
 if (list.length > 0) {
 this.$emit('whiteShow', 'inline')
 } else {
 this.$emit('whiteShow', 'none')
 }
 )
}

list是子頁面的內容，這樣如果子頁面沒有內容就可以隱藏掉了

方法2案例：我這邊需要tab頁隱藏

<el-tabs v-model="initTab" type="card">
 <el-tab-pane label="1信息" name="tab1">
 1
 </el-tab-pane>
 <el-tab-pane label="2報告" name="tab2">
 2
 </el-tab-pane>
 <el-tab-pane label="3信息" name="tab3">
 3
 </el-tab-pane>
 <el-tab-pane label="4信息" name="tab4">
 <ziyemian-group title="4信息" v-if="detailInfo">
 </ziyemian-group>
 
 </el-tab-pane>
 <el-tab-pane label="5信息" name="tab5">
 5
 </el-tab-pane>
 <el-tab-pane label="其它信息" name="tab6">
 6
 </el-tab-pane>
</el-tabs>
 
import ZiyemianGroup from './ZiyemianGroup.vue'
components: {
 ZiyemianGroup
},
data () {
 return {
 detailInfo: {}，
 initTab：‘tab1'
 }
}
watch: {
 detailInfo: function () {
 this.$nextTick(function () {
 this.tabShow()
 })
 }
},
methods: {
 tabShow () {
 document.getElementsByClassName('el-tabs__item').item(6).style.display = 'none' // 隱藏tab6
 }
}

nextTick方法，意思是在下次 DOM 更新循環(huán)結束之后執(zhí)行延遲回調。在修改數(shù)據(jù)之后立即使用這個方法，獲取更新后的 DOM。

隱藏tab的方法我用了原生js，因為vue生成后的頁面和寫的vue頁面有所差別，所以我直接用了最笨的方法進行匹配。

以上所述是小編給大家介紹的Vue.js 關于頁面加載完成后執(zhí)行一個方法的問題詳解整合，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

聲明：本網(wǎng)頁內容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com