十三 vue元件

2021-10-01 13:53:42 字數 1029 閱讀 3475

什麼是元件: 元件的出現,就是為了拆分vue例項的**量的,能夠讓我們以不同的元件,來劃分不同的功能模組,將來我們需要什麼樣的功能,就可以去呼叫對應的元件即可; 元件化和模組化的不同:

方式一:使用 vue.extend 來建立vue元件

方式二:直接使用 vue.component 建立元件

方式三:通過 template 元素,在外部定義的元件結構

好用,不錯!

使用template元素定義私有元件:

元件中的data應該定義為乙個函式並且函式return返回乙個物件。

為什麼元件中的data要定義為乙個函式function並且返回乙個物件:

元件中使用methods

切換方式一:用v-if,v-else實現元件的切換顯示

註冊方式二:vue提供了 component ,來展示對應名稱的元件,:is指定為哪個元件就顯示哪個元件

註冊

註冊

通過 物件 字面量的形式, 定義了乙個 元件模板物件

1、父元件向子元件傳值

通過屬性繫結的形式父元件傳遞給子元件

2、子元件向父元件傳值,通過事件繫結機制父元件把方法傳遞給子元件,子元件把資料通過引數給父元件

父元件傳遞方法給子元件,父元件可以拿到子元件的資料(利用父元件傳遞的那個方法的引數)

vue元件引入另一vue元件

個人blog,歡迎關注加收藏 在元件中引入另一組件 元件化開發,最重要的特點就是其復用性。當某一部分內容重複出現在多個元件中 時,可以將其提出單獨組成乙個元件。重複使用。如下圖 其中底部導航條的部分 就會出現在多個元件中 在當前元件card.vue中引入barbottom.vue的步驟如下 在car...

Vue系列十三 外掛程式

一 自定義外掛程式 vue 外掛程式是乙個包含 install 方法的物件 通過 install 方法給 vue 或 vue 例項新增方法,定義全域性指令等 function window myplugin.install function vue,options 2.新增全域性資源 vue.dir...

vue元件與元件化

元件化是當今最為流行的一種可復用性增加的方法,隨著當今前端開發的複雜度更加,這個元件化變得越來越流行 vue.js通過vue.extend 方法來擴充套件元件的使用 vue.extend options 裡面的options引數和 vue options 的options引數幾乎是一致的 new v...