手寫Vue元件踩坑與心得

2021-08-10 00:10:54 字數 2465 閱讀 9403

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

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

:value="data">

children-component>

export default(

}})export default(

})

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

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

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

children-component>

export default(

},methods :

}})export default(

})

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

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

:foo.sync="bar">

comp>

:foo="bar" @update:foo="val => bar = val">

comp>

this.$emit('update:foo', newvalue)

個人感覺vue框架其實還是不贊同直接修改資料,但是它幫你定義了乙個update事件,讓你在子元件可以直接顯式呼叫,不需要自己去定義事件這麼麻煩了。

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

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

v-mode="data" >

children-component>

export default(

},watch :

}})export default(

})

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

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

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

children-component>

看了這行**大家心裡估計也能明白的差不多了,其實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);

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

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