vue的元件基礎

不言原創: 2018-05-05 15:52:141264瀏覽

這篇文章為大家總結了vue元件基礎的相關知識點以及程式碼實例，有需要的朋友可以學習參考下。

什麼是元件

#元件（Component）是資料和方法的簡單封裝。 web中的元件其實可以看成是頁面的一個組成部分，它是一個具有獨立的邏輯和功能的介面，同時又能根據規定的介面規則進行相互融和，最終成為一個完整的應用，頁面就是由一個個類似這樣的組成部分組成的，例如導航、列表、彈跳窗、下拉式選單等。頁面只不過是這樣元件的容器，元件自由組合形成功能完整的介面，當不需要某個元件，或想要取代某個元件時，可以隨時進行替換和刪除，而不影響整個應用程式的運作。、前端組件化的核心思想就是將一個巨大複雜的東西拆分成粒度合理的小東西。

使用提高開發效率、方便重複使用、簡化調試步驟、提升整個專案的可維護性、便於協同開發。

vue作為一個輕量級前端框架，其核心就是元件化開發。

元件可以擴充 HTML 元素，封裝可重複使用的程式碼。在較高層面上，元件是自訂元素，Vue.js 的編譯器為它添加特殊功能。在某些情況下，元件也可以表現為以 is 特性進行了擴充的原生 HTML 元素。在

vue中，元件是可重複使用的 Vue 實例。因為元件是可重複使用的 Vue 實例，所以它們與 new Vue 接收相同的選項，例如 data、computed、watch、methods 以及生命週期鉤子等。僅有的例外是像 el 這樣根實例特有的選項。

元件註冊

全域註冊

透過Vue.component 來建立元件：

 Vue.component(&#39;my-component-name&#39;, {
 // ... 选项 ...
 })

這些元件是全域註冊的。也就是說它們在註冊之後可以用在任何新建立的 Vue 根實例 (new Vue) 的範本中。例如：

Vue.component(&#39;component-a&#39;, { /* ... */ })
Vue.component(&#39;component-b&#39;, { /* ... */ })
Vue.component(&#39;component-c&#39;, { /* ... */ })

new Vue({ el: &#39;#app&#39; })

<p id="app">
 <component-a></component-a>
 <component-b></component-b>
 <component-c></component-c>
</p>

在所有子元件中也是如此，也就是說這三個元件在各自內部也都可以互相使用。

局部註冊

全域註冊往往是不夠理想的。例如，如果你使用像 webpack 這樣的建置系統，全域註冊所有的元件意味著即便你已經不再使用一個元件了，它仍然會被包含在你最終的建置結果中。這造成了用戶下載的 JavaScript 的無謂的增加。

在這些情況下，你可以透過一個普通的JavaScript 物件來定義元件：

var ComponentA = { /* ... */ }
var ComponentB = { /* ... */ }
var ComponentC = { /* ... */ }

然後在components 選項中定義你想要使用的元件：

new Vue({
 el: &#39;#app&#39;
 components: {
 &#39;component-a&#39;: ComponentA,
 &#39;component-b&#39;: ComponentB
 }
})

對於components 物件中的每個屬性來說，其屬性名稱就是自訂元素的名字，其屬性值就是這個組件的選項物件。
注意局部註冊的元件在其子元件中不可用。例如，如果你希望ComponentA 在ComponentB 中可用，你需要這樣寫：

var ComponentA = { /* ... */ }

var ComponentB = {
 components: {
 &#39;component-a&#39;: ComponentA
 },
 // ...
}

使用Babel和webpack中的註冊元件

import ComponentA from &#39;./ComponentA.vue&#39;

export default {
 components: {
 ComponentA
 },
 // ...
}

注意在ES2015 中，在物件中放一個類似ComponentA 的變數名其實是ComponentA: ComponentA 的縮寫，也就是這個變數名同時是：

用在模板中的自訂元素的名稱
包含了這個元件選項的變數名稱

#基礎元件的自動化全域註冊

沒看懂。

data 必須是一個函數

data: {
 count: 0
}

這樣定義的data中的變數是全域變數，在使用元件時，在一個元件中修改變數的值，會影響到所有元件中該變數的值。為避免變數幹擾，一個元件的data 選項必須是一個函數，因此每個實例可以維護一份被傳回物件的獨立的拷貝：

data: function () {
 return {
 count: 0
 }
}

動態元件

在不同元件之間進行動態切換是非常有用的，例如在一個多標籤的介面裡：

上述內容可以透過Vue 的8c05085041e56efcb85463966dd1cb7e 元素加上一個特殊的is 特性來實現：

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

你會注意到，如果你選擇了一篇文章，切換到Archive 標籤，然後再切換回Posts，是不會繼續展示你之前選擇的文章的。這是因為你每次切換新標籤的時候，Vue 都建立了一個新的 currentTabComponent 實例。

重新建立動態元件的行為通常是非常有用的，但是在這個案例中，我們更希望那些標籤的元件實例能夠被在它們第一次被創建的時候快取下來。為了解決這個問題，我們可以用一個 7c9485ff8c3cba5ae9343ed63c2dc3f7 元素將其動態元件包裹起來。

<!-- 失活的组件将会被缓存！-->
<keep-alive>
 <component v-bind:is="currentTabComponent"></component>
</keep-alive>

可以在這裡查看動態元件範例。 https://jsfiddle.net/chrisvfritz/Lp20op9o/

dom标签内使用组件

有些 HTML 元素，诸如 ff6d136ddc5fdfeffaf53ff6ee95f185、c34106e0b4e09414b63b2ea253ff83d6、f5d188ed2c074f8b944552db028f98a1 和 221f08282418e2996498697df914ce4e，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如 25edfb22a4f469ecb59f1190150159c6、a34de1251f0d9fe1e645927f19a896e8 和 5a07473c87748fb1bf73f23d45547ab8，只能出现在其它某些特定的元素内部。

这会导致我们使用这些有约束条件的元素时遇到一些问题。例如：

<table>
 <blog-post-row></blog-post-row>
</table>

这个自定义组件 03ec9a72fb73e8d58de61791d006e075 会被作为无效的内容提升到外部，并导致最终渲染结果出错。幸好这个特殊的 is 特性给了我们一个变通的办法：

<table>
 <tr is="blog-post-row"></tr>
</table>

vue的元件基礎

相關文章