詳解vue組件使用詳解

這次帶給大家詳解vue組件使用詳解，詳解vue組件所使用的注意事項有哪些，以下就是實戰案例，一起來看一下。

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

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

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

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

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

元件註冊

全域註冊

#透過Vue.component 來建立元件：

 Vue.component('my-component-name', {
 // ... 选项 ...
 })

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

Vue.component('component-a', { /* ... */ })
Vue.component('component-b', { /* ... */ })
Vue.component('component-c', { /* ... */ })
new Vue({ el: '#app' })
<p>
 <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: '#app'
 components: {
 'component-a': ComponentA,
 'component-b': ComponentB
 }
})

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

var ComponentA = { /* ... */ }
var ComponentB = {
 components: {
 'component-a': ComponentA
 },
 // ...
}

使用Babel和webpack中的註冊元件

import ComponentA from './ComponentA.vue'
export default {
 components: {
 ComponentA
 },
 // ...
}

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

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

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

沒看懂。

data 必須是一個函數

data: {
 count: 0
}

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

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

動態元件

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

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

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component></component>

你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候，Vue 都创建了一个新的 currentTabComponent 实例。

重新创建动态组件的行为通常是非常有用的，但是在这个案例中，我们更希望那些标签的组件实例能够被在它们第一次被创建的时候缓存下来。为了解决这个问题，我们可以用一个 元素将其动态组件包裹起来。

<!-- 失活的组件将会被缓存！-->
<keep-alive>
 <component></component>
</keep-alive>

可以在这里查看动态组件例子。https://jsfiddle.net/chrisvfritz/Lp20op9o/

dom标签内使用组件

有些 HTML 元素，诸如

、

、 和 ，对于哪些元素可以出现在其内部是有严格限制的。而有些元素，诸如
1. 、
和 ，只能出现在其它某些特定的元素内部。

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

 

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

 

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

JS做出哈希表功能


Vue父子组件数据传递方法总结（附代码）

以上是詳解vue組件使用詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！