vue元件封裝注意項

好久沒用vue,複習一下,有誤請指出

就寫寫我常用的,我覺得是這三種是夠用的,其他的看得少沒用過,有空看看用用再寫

props可以是陣列可以是物件。

props:

, obj:)}
, arr:
, fun:10}
}

props裡面的屬性都不能被賦值修改，如果修改會報錯。如果需要對props裡面的屬性進行修改，可以在computed使用其他的值

向父級傳遞事件,以及資料,資料將作為事件的引數傳遞

有多層巢狀的元件封裝時傳遞資料和事件

$attrs用v-bind繫結在父級元件上即可使用,用來傳遞隔代的資料

$listeners用v-on繫結在父級上使用,用來繫結隔代的事件

vuex是用來管理全域性的元件狀態,那麼自然是可以用來傳遞元件間資料的,並且父子,隔代,兄弟都可以傳,資料修改沒有侷限

把父元件的**塊插入到子元件既定的位置

// 父元件

="father"
>
這是父元件正在用子元件<
/p>
balabala...
<
/span>
<
/son>
<
/div>
<
/template>
// 子元件
這樣就把

這是父元件正在用子元件
balabala...插入到了son元件中的slot位置

上面這種就是預設插槽,我們還可以插入多個元件表示不同的功能塊並給每個插槽起名,這種叫做具名插槽(具有名字的插槽,哈哈)
// 父元件
="father"
>
這是父元件正在用子元件<
/p>
"header"
>
header內容
<
/template>
"content"
>
content內容
<
/template>
"footer"
>
footer內容
<
/template>
<
/son>
<
/div>
<
/template>
// 子元件
這裡注意
父元件下的**塊,必須要有slot才能插入,

無名的插入無名的slot,有名的對應名字插入,
無名和有名可同時存在
如果元件裡引用了單選元件，而單選框繫結的值正是通過props裡的屬性從父元件裡傳進來，那麼當單選元件在切換時，也會報，不能直接修改props裡的屬性值得錯誤。

"radio" label=

"1">備選項1
<
/el-radio>
"radio" label=
"2">備選項2
<
/el-radio>
<
/template>
export
default;}
}<
/script>

如上**，雖然沒有自己對radio進行賦值，但是當我們在切換單選項時，元件內部會自動對我們繫結的radio進行賦值，所以我們不應該使用props裡繫結的值，radio只是用來接收資料的，並不能直接修改他的值。

所以如果二次封裝元件時，如果有用到radio元件，而它繫結的值剛好在props裡傳遞，要使用computed:

"radiovalue" label=

"1">備選項1
<
/el-radio>
"radiovalue" label=
"2">備選項2
<
/el-radio>
<
/template>
export
default;}
, computed:
,set
:function
(value)}}
,}<
/script>

Vue元件檔案的注意項

ref屬性 點選出現上方dom元素 功能 讓元件接收外部傳過來的資料 備註 props是唯讀的，vue底層會監測你對props的修改，如果進行了修改，就會發出警告，若業務需求確實需要修改，那麼請複製props的內容到data中乙份，然後去修改data中的資料。嘗試修改收到的年齡 功能 可以把多個元件...

vue 封裝元件

一 通過install 封裝 1 建立元件資料夾包含 vue檔案和對應的.js檔案 如圖 2 完成元件模板 這是乙個公共元件內容 3 在相應的js內註冊元件 list.js檔案 import mylist from list.vue const list export default list 匯入...

vue元件封裝講解，和注意事項

props 多種型別 propb string,number 必傳且是字串 propc 數字，有預設值 propd 陣列 物件的預設值應當由乙個工廠函式返回 prope 自定義驗證函式 propf 我們在 props 中接收資料，注意props物件裡面 鍵值 是對改資料的 資料型別 的規定。做了規範...