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

2021-10-16 13:19:27 字數 1078 閱讀 4696

props : ,

// 多種型別

propb: [string, number],

// 必傳且是字串

propc: ,

// 數字,有預設值

propd: ,

// 陣列/物件的預設值應當由乙個工廠函式返回

prope: }},

// 自定義驗證函式

propf:

}},

我們在 props 中接收資料,注意props物件裡面 鍵值 是對改資料的 資料型別 的規定。做了規範,使用者就只能傳輸指定型別(type型別)的資料,否則報警告

而props物件中的資料,我們可以直接在當前元件中使用  this.beanprops ,可以直接使用。這裡要強調一下,props傳過來的資料只做展示,不得修改,想修改,再新寫乙個data中的變數承接做資料的再處理。

import treeselectpeople from "../../../components/tree-select-people.vue";

components: ,

這裡提供 2 種實現方法,但是 第一種不推薦,強烈不推薦

方式一:

selectvalue: ,

//**段

this.selectvalue.data = '我被修改了'

即,父元件將 物件 資料傳遞給子元件,子元件直接修改props過來的物件的值

他的實現原理簡單提一下: 這個物件、陣列啦,是引用資料型別,說白了,就是儲存單元的資訊是指標,真正資料在別的地方,通過指標查詢的資料,所以這樣寫,對瀏覽器來說僅僅是傳遞了乙個指標,資料還是同乙份資料。所以你能修改。

方式二:

正兒八經的通過 $emit 方法去掉父元件的方法,在父元件中修改data的資料。(根正苗紅的方法,規範寫法)(就是在子元件新建乙個新的變數來獲取父元件傳過來的值)

Vue注意事項

從 vue loader 13.0.0,不能用 require 來引入 vue 檔案,因為 vue 檔案最終會被編譯成 es6 module。從 vue 2.2.0 後使用 require vue 會報錯,應使用 es6 module import 具體原因請參考 vue 更新說明 webpack2...

vue 元件單獨引入 css 注意事項

起因 想要在不同元件引入不同的引入不同的css,這樣後面維護起來會容易一些 目錄結構 報錯原本以為用這樣就能引入了 但發現是報錯 網上答覆 但我這邊還是報錯 還有是通過npm引入scss之類的方法,試過了後都是報錯 最後的結果 最後用這種方法居然成功了 如果你以上方法都失敗了,那你就只能妥協了,把所...

Vue 元件中 移動 this el 的注意事項

比如,這幾行 會導致 dom 元素位置 與 vnode 期望的位置不一致 比如 父元件 div id p h1 第1個 button click add 新增 p v for item,index in list key index 第 個元素 ccc js部分methods 子元件 ccc js部...