使用props傳值時無法在mounted處理的解決方案
更新時間：2022年04月23日 09:40:25 作者：袁丟丟
這篇文章主要介紹了使用props傳值時無法在mounted處理的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
props傳值無法在mounted處理的解決
遇到的問題
父組件傳值，在子組件中不能用mounted處理
export default{
?? ?props:['floor1'],
?? ?data(){
?? ??? ?return {
?? ??? ??? ?floor1_0:'',
?? ??? ??? ?floor1_1:'',
?? ??? ??? ?floor1_2:'',
?? ??? ?}
?? ?},
?? ?mounted(){
?? ??? ?console.log(this.floor1) ? ? ? ? ? ? //打印出的不是所傳的值
?? ??? ?this.floor1_0 = this.floor1[0]; ? ? ?
?? ?}
}因為props為異步傳值（就是在父組件沒有加載完數(shù)據(jù)時，floor1就傳遞到了子組件，此時floor1還沒被附上值，先執(zhí)行了子組件的mounted），而mounted執(zhí)行一次后無法改變floor1的值。
解決
使用偵聽器watch，當floor1改變時，重新計算
watch:{
?? ?floor1:function(val){
?? ??? ?this.floor1_0 = val[0];
?? ??? ?this.floor1_1 = val[1];
?? ?}
}vue筆記（props和mounted）
1.mounted
1.1mounted中使用$nextTick會導致頁面掛掉
mounted() {
// 頁面卡死
? ? this.$nextTick(() => {
? ? ? this.setUrl()
? ? })
? }2.props
2.1props傳過去的值，第一時間在mounted是獲取不到的。因為是異步傳值的。
解決方法：
（1）使用watch
（2）將需要進行的處理在父組件進行操作，然后將操作完的值直接傳給子組件。
watch: {
? ?datas: function (val) {
? ? ??
? ? }
? }
或
(父)
?<examAchSearchHeader :exprotUrl="exprotUrl"></examAchSearchHeader>
?...
this.exportUrl = XXXX
(子)
props: {
? ? exportUrl: String
}2.2通過props傳給子組件的值變化后子組件接收到 和 通過refs訪問子組件方法中使用接收到的參數(shù)變化的順序問題
通過refs訪問時，接收到的參數(shù)是變化前的參數(shù)。還是因為異步的問題。可以強制賦值改變，或用watch等。
?// parent
?<examAchTable ref="achTable" :dataList="examAchList"></examAchTable>
?
?// 若這里不強制賦值一下，在examAchList變化后直接調(diào)用子組件的transData方法時，子組件dataList仍是變化前的值
?this.$refs.achTable.dataList = this.examAchList
?this.$refs.achTable.transData(res.data.totalRecord)
?
?// child
?transData(total) {
? ? ? if (this.dataList)?
? ? // ...
}以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
vue監(jiān)聽瀏覽器原生返回按鈕,進行路由轉(zhuǎn)跳操作
這篇文章主要介紹了vue監(jiān)聽瀏覽器原生返回按鈕,進行路由轉(zhuǎn)跳操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
從vue基礎開始創(chuàng)建一個簡單的增刪改查的實例代碼(推薦)
這篇文章主要介紹了從vue基礎開始創(chuàng)建一個簡單的增刪改查的實例代碼，需要的朋友參考下2018-02-02
Vue?3中的Hooks函數(shù)是一種用于在組件中共享可復用邏輯的方式，簡單來說，就是將單獨功能的js代碼抽離出來，?加工成公共函數(shù)，從而達到邏輯復用，下面小編就來和大家聊聊Hooks函數(shù)的使用及封裝思想吧2023-06-06
Vue3?中的?readonly?特性及函數(shù)使用詳解
readonly是Vue3中提供的一個新特性，用于將一個響應式對象變成只讀對象，這篇文章主要介紹了Vue3?中的?readonly?特性詳解,需要的朋友可以參考下2023-04-04
Vue3中的createGlobalState用法及示例詳解
createGlobalState 是 Vue 3 中一種管理全局狀態(tài)的簡便方式,通常用于管理多個組件間共享的狀態(tài),由 @vueuse/core 提供的,允許創(chuàng)建一個響應式的全局狀態(tài),本文給大家介紹了Vue3中的createGlobalState用法及示例,需要的朋友可以參考下2024-10-10
本文通過實例代碼給大家介紹了Vue lazyload圖片懶加載的相關知識，通過導入配置等操作src/main.jswenj ,代碼簡單易懂，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友參考下吧2021-12-12
這篇文章主要為大家詳細介紹了vue2.0實現(xiàn)導航菜單切換效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-05-05
這篇文章主要為大家詳細介紹了使用Vue實現(xiàn)簡單日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-08-08
vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解
這篇文章主要介紹了vuex中數(shù)據(jù)持久化插件vuex-persistedstate使用詳解，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-03-03
Vue實現(xiàn)渲染數(shù)據(jù)后控制滾動條位置(推薦)
這篇文章主要介紹了Vue實現(xiàn)渲染數(shù)據(jù)后控制滾動條位置，本文通過圖文并茂的形式給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-12-12