vue 元件最佳實戰

2022-03-12 16:17:35 字數 1368 閱讀 2768

[vue]全域性元件和區域性元件(巢狀+props引用父元件資料)

[vue]元件篇

[vue]元件的建立(componet)和銷毀(keep-alive快取)和父子dom同步nexttick

[vue]實現父子元件資料雙向繫結

[vue]render函式渲染元件

[vue]webpack&vue元件工程化實踐

區域性元件

全域性元件

定義定義註冊-

使用使用

元件化程式設計好處: 1,重用性 2,維護性

- 全域性元件定義(體會一下重用性)

- 最簡單的區域性元件(寫法)

- 區域性元件(帶資料)

1.子元件不能直接獲取父元件的資料

- 也可以將物件寫在外面(注意: data和template都在物件裡)

- 元件之間最好不要共享資料

參考: keepfool

附:

- 了解一下template(生命週期)

2. 只能有乙個根元素,不能是文字節點

- 子元件的資料更改,不影響父元件

- 父元件的資料更改,會影響子元件

name: }

age: }

myname: }

myage: }

參考

- 雙向繫結(2.x版本不好使)

- 單次繫結

vue元件有兩種,一種是全域性元件,一種是區域性元件。整個專案經常用到的用全域性寫法,用到比較少的專供特定頁面用的使用區域性元件。

import vue from 'vue';

import mycomponent from '@/components/mycomponent.vue'; // 匯入自己寫的元件檔案

vue.use(mycomponent); // 自定義全域性元件的時候需要vue.use();

vue.component('my-component', mycomponent); //初始化元件

new vue(,

});

下面附上自定義元件的mycomponent.vue檔案**:

參考:

webpack vue的幾種引入方式:

vue實戰 vue父子元件通訊方式彙總

vue專案的一大亮點就是元件化。使用元件可以極大地提高專案中 的復用率,減少 量。但是使用元件最大的難點就是父子元件之間的通訊。我是父元件 我是子元件 父元件對我說 子元件使用 emit方法呼叫父元件的方法,達到子通訊父的目的。我是父元件 我是子元件 父元件對我說 父元件通過 refs呼叫子元件的方...

元件祖孫傳值 Vue 元件間傳參最佳實踐

1.父子元件間的資料傳遞 1.1從父元件獲取子元件的資料 1.1.1通過繫結 props 將父元件的資料關聯到子元件,並修飾 sync 或者用 v model 同步來自子元件的資料變化 使用.sync 父元件 toggle import mydialog from components mydial...

Vue最佳實踐

為列表渲染設定屬性key 在v if v if else v else中使用key 如果一組v if v else的元素型別相同,最好使用屬性key 比如兩個元素 路由切換元件不變 使用vue.js時,頁面切換到同乙個路由但不同引數的位址時,元件的生命週期鉤子並不會重新觸發 例 const rout...