Vue元件踩坑與心得

事實上的確如此，產品需求總是千奇百怪。正如我公司現在的產品，引用的是elemen-ui的庫，但是無法級聯多選，下拉多選的展現形式不對，穿梭框無法上下移動等各種需求逼迫我們只能自己去寫元件實現了。

自己手寫實現了兩個元件之後，先寫一篇記錄一些坑和學會的新東西

1、子元件不允許修改父元件資料

之前在寫angular的父子元件傳遞資料，子元件可以修改父元件傳遞進來的資料。不過在vue中子元件不允許修改父元件穿進來的值，以vue舉例來說

export default(
}})export default(
})

此舉會引發乙個非常常見的報錯，

那麼解決方法是什麼呢，那就要看你需求了。比如傳進來的是乙個渲染列表，我需要的只是修改渲染的資料，那麼可以emit出去，然後在父元件重新賦值，通過雙向繫結，觸發子元件的再次渲染。

export default(
},methods : 
}})export default(
})

例子寫的比較簡單，其實原理就是emit乙個資料到父元件上去，然後在父元件中接受到這個傳遞上來的新值，將data賦予新值，然後重新傳遞到了子元件，起到乙個變向修改子元件的效果。

2.vue給每個元件提供了乙個預設的父子傳遞事件v-model。

但是你每次父子元件傳遞資料時，都要父子處定義乙個事件是很麻煩的，vue則為每個元件提供了乙個預設v-model的語法糖。

export default(
},watch : 
}})export default(
})

因為之前一直使用ng-model來用於表單元件的傳遞，所以開始對於v-mode也是這個印象，不過後面看了element-ui的原始碼才發現我想簡單了，然後網上搜了一下對於這個語法糖的解釋。

//注意，該元件不是表單元件

看了這行**大家心裡估計也能明白的差不多了，其實vue只是幫我們把父元件上的兩段宣告合二為一了，同時再幫我們在子元件處直接省略了定義。語法糖說到底就是幫我們省力的嘛。

3.全域性一次性引用寫好的元件

假如我們寫好了一些元件，接下去肯定還要引入和使用吧。但是你寫了這麼多元件，在每個地方乙個個引用想要的是一件很麻煩的事情。我們最好是在乙個初始的地方一次性全部引入，然後在用的地方直接使用

(當然全部引入無可避免的會引入和打包不需要的東西，不過這是公共元件庫的煩惱，我們自己寫的肯定會全部用到)。

// 在檔案開頭初始引入所有的元件檔案
import b from "./components/common/b.vue"
import c from "./components/common/c.vue"
const components = [b,c];
const install = function (vue, opts = {}) );
};export default install

然後直接在啟動的main.js檔案裡面引入就好

import ui from "install.js"
vue.use(ui);

然後你就可以隨意在任何乙個元件裡面直接呼叫了，比自己之前在每個元件裡重複呼叫要方便一點。

好了，暫時到這裡，都是自己的踩得坑和心得，希望對大家有所幫助吧，接下去還有的話再補充好了。乾貨不多，爛筆頭為主。

Vue元件踩坑與心得

1 子元件不允許修改父元件資料之前在寫angular的父子元件傳遞資料，子元件可以修改父元件傳遞進來的資料。不過在vue中子元件不允許修改父元件穿進來的值，以vue舉例來說 value data children component export default export default 此舉...

手寫Vue元件踩坑與心得

Vue踩坑紀錄

前端 vue,vuetify 後端 flask,flask cors 資料庫 mongodb 前後通訊 axios dashboard methods get defkey index key index db.sns.find sort datetime 1 return dumps key in...

Vue元件踩坑與心得

Vue元件踩坑與心得

手寫Vue元件踩坑與心得

Vue踩坑紀錄

相關推薦