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