手寫Vue元件踩坑與心得

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

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

:value="data">

children-component>
export default(
}})export default(
})

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

:value="data" @changeprop="changedata">

children-component>
export default(
},methods : 
}})export default(
})

被人提醒到乙個方法是用.sync，這個方法也是可以的。之前一直以為是被廢棄就沒用，才發現它其實是在的。看了一下.sync文件，發現這其實是乙個語法糖的形式展現出來。如文件所示

:foo.sync="bar">

comp>
:foo="bar" @update:foo="val => bar = val">
comp>
this.$emit('update:foo', newvalue)

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

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

v-mode="data" >

children-component>
export default(
},watch : 
}})export default(
})

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

:value="data" @input="data = arguments[0]">
children-component>

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

import ui from

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

v-model="data1">

b>
v-model="data2">
c>

zhuanzai

Vue元件踩坑與心得

事實上的確如此，產品需求總是千奇百怪。正如我公司現在的產品，引用的是elemen ui的庫，但是無法級聯多選，下拉多選的展現形式不對，穿梭框無法上下移動等各種需求逼迫我們只能自己去寫元件實現了。自己手寫實現了兩個元件之後，先寫一篇記錄一些坑和學會的新東西 1 子元件不允許修改父元件資料 之前在寫an...

Vue元件踩坑與心得

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

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...