簡介

組件（component）是vue.js最強大的功能之一。組件的作用就是封裝可重用的代碼，通常一個組件就是一個功能體，便于在多個地方都能夠調用這個功能體。 每個組件都是Vue的實例對象。 我們實例化的Vue對象就是一個組件，而且是所有組件的根組件

---

創建組件

//簡寫 //my-componen.vue <template><div></div> </template><script> export default { }; </script>//1. 注冊組件，傳入一個擴展過的構造器Vue.component('my-component', Vue.extend({ /* ... */ }))//使用Vue.extend去創建組件var Profile = Vue.extend({template: '<p>{{firstName}} {{lastName}} aka {{alias}}</p>',data: function () {return {firstName: 'Walter',lastName: 'White',alias: 'Heisenberg'}}})//2. 注冊組件，傳入一個選項對象 (自動調用 Vue.extend)Vue.component('my-component', {})同步引入組件 var ComponentA = { /* ... */ }異步引入組件 //簡寫:const AsyncComponent = () => ({component: import(’./MyComponent.vue’)}） //完整寫法：//異步加載，就會存在加載過程（正在加載中）、以及加載失敗等異常情況。高級用法提供了加載、失敗、timeout、加載組件四種狀態const AsyncComponent = () => ({// 需要加載的組件 (應該是一個 Promise 對象)component: import(’./my-componen.vue’),// 異步組件加載時使用的組件loading: LoadingComponent,// 加載失敗時使用的組件error: ErrorComponent,// 展示加載時組件的延時時間。默認值是 200 (毫秒)delay: 200,// 如果提供了超時時間且組件加載也超時了，// 則使用加載失敗時使用的組件。默認值是：Infinitytimeout: 3000}

組件注冊

1.全局注冊

//這些組件是全局注冊的。也就是說它們在注冊之后可以用在任何新創建的 Vue 根實例 (new Vue) //的模板中。比如： Vue.component('component-a', ComponentA)new Vue({ el: '#app' })

局部注冊

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

組件緩存

<keep-alive> 包裹動態組件時，會緩存不活動的組件實例，而不是銷毀它們。和 <transition> 相似，<keep-alive> 是一個抽象組件：它自身不會渲染一個 DOM 元素，也不會出現在父組件鏈中。

內子組件component中的is attribute 來切換不同的組件：

普通組件export default {name: 'currentTabComponent',data () {return {}}} include 字符串，數組或正則表達式。只有名稱匹配的組件會被緩存。 exclude 字符串，數組或正則表達式。任何名稱匹配的組件都不會緩存。 max 數字。最多可以緩存多少組件實例。- 動態組件<component v-bind:is="currentTabComponent"></component>//動態組件緩存判斷<keep-alive include="test-keep-alive"><!-- 將緩存name為test-keep-alive的組件 --><component :is="currentTabComponent"></component></keep-alive><keep-alive :include="['a', 'b']"><component :is="view"></component></keep-alive><keep-alive include="a,b">//將緩存name為a或者b的組件，結合動態組件使用<component :is="view"></component></keep-alive>//使用正則表達式，需使用v-bind<keep-alive :include="/a|b/"><component :is="view"></component></keep-alive>路由緩存//緩存判斷 ---同上<keep-alive :include="includedComponents"><router-view></router-view></keep-alive><keep-alive :include="['Home', 'User']"><router-view /></keep-alive><keep-alive include="Home,User"><router-view /></keep-alive><keep-alive :include="/a|b/"><router-view /></keep-alive>//將不緩存name為test-keep-alive的組件--同上<keep-alive exclude="test-keep-alive"><router-view /></keep-alive>

組件間通信

父傳子 父: <children prop=‘prop’/>子：export default {//簡寫props:['myMessage','mm'],// 完整寫法props: {myMessage: {type: Array,default: [5, 6, 7] //指定默認的值}}, } //子傳父子：this.$emit("getData",data)父：<children @getData='getdata'/>method:{getData(data){console.log(data)}} //兄弟間//發數據的兄弟：this.$eventBus.$emit("getData",data)//在main.js中添加第三者：vue實例用于中轉；import eventBus from './eventBus'Vue.prototype.$eventBus=eventBus//接收數據的兄弟：this.$eventBus.$on("getData",data)//爺孫間爺：<father prop=‘prop’ />父：<children v-bind='$atter' v-on='$event'/>孫：export default {props:['prop']}//祖與后代-注意該方法不能反向通信//祖：export default {provide () {return {demo: 'foo'}}}//后代：export default {inject: ['demo'],data(){return {str: 'foo'}} }}

組件的生命周期

- beforeCreate 在實例初始化之后，數據觀測和事件配置之前被調用，此時組件的選項對象還未創建，el 和 data 并未初始化，因此無法訪問methods， data， computed等上的方法和數據。 - created 實例已經創建完成之后被調用，在這一步，實例已完成以下配置：數據觀測、屬性和方法的運算，watch/event事件回調，完成了data 數據的初始化，el沒有。 然而，掛在階段還沒有開始, $el屬性目前不可見，這是一個常用的生命周期，因為你可以調用methods中的方法，改變data中的數據，并且修改可以通過vue的響應式綁定體現在頁面上，，獲取computed中的計算屬性等等，通常我們可以在這里對實例進行預處理；有一些童鞋喜歡在這里發ajax請求，值得注意的是，這個周期中是沒有什么方法來對實例化過程進行攔截的，因此假如有某些數據必須獲取才允許進入頁面的話，并不適合在這個方法發請求，建議在組件路由鉤子beforeRouteEnter中完成- beforeMount掛在開始之前被調用，相關的render函數首次被調用（虛擬DOM），實例已完成以下的配置： 編譯模板，把data里面的數據和模板生成html，完成了el和data 初始化，注意此時還沒有掛在html到頁面上。- mounted掛在完成，也就是模板中的HTML渲染到HTML頁面中，此時一般可以做一些ajax操作，mounted只會執行一次。- beforeUpdate在數據更新之前被調用，發生在虛擬DOM重新渲染和打補丁之前，可以在該鉤子中進一步地更改狀態，不會觸發附加地重渲染過程- updated在由于數據更改導致地虛擬DOM重新渲染和打補丁只會調用，調用時，組件DOM已經更新，所以可以執行依賴于DOM的操作，然后在大多是情況下，應該避免在此期間更改狀態，因為這可能會導致更新無限循環，該鉤子在服務器端渲染期間不被調用- activated被 keep-alive 緩存的組件激活時調用。 - deactivated被 keep-alive 緩存的組件失活時調用。- beforeDestroy在實例銷毀之前調用，實例仍然完全可用，這一步還可以用this來獲取實例，一般在這一步做一些重置的操作，比如清除掉組件中的定時器 和 監聽的dom事件- destroyed在實例銷毀之后調用，調用后，所以的事件監聽器會被移出，所有的子實例也會被銷毀，該鉤子在服務器端渲染期間不被調用

- 插槽

插槽（Slot）是 vue 為組件的封裝者提供的能力。允許開發者在封裝組件時，把不確定的、希望由用戶指定的。

普通插槽

//定義： navigation<av-bind:href="url"class="nav-link"><slot></slot></a>//使用組件<navigation-link url="/profile">Your Profile</navigation-link>

具名插槽

//定義：<template id="myButton"><div><slot name="header"></slot></div> </template>//使用：<my-button> <template v-slot:header><h3>This is header</h3></template><my-button>//跟 v-on 和 v-bind 一樣，v-slot 也有縮寫，即把參數之前的所有內容 (v-slot:) 替換為字符 //#。例如 v-slot:header 可以被重寫為 #header：<my-button><template #header><h1>Here might be a page title</h1></template</my-button>

作用域插槽

有時讓插槽內容能夠訪問子組件中才有的數據是很有用的。例如，設想一個帶有如下模板的

//定義默認作用域插槽：<span><slot :user="user">{{ user.lastName }}</slot></span>//使用<current-user><template v-slot:default="slotProps">{{ slotProps.user.firstName }}</template></current-user>//簡寫：<current-user #default="{ user }">{{ user.firstName }}</current-user>//定義有名作用域插槽：<span><slot name="todo" :user="user"><!-- 后備內容 -->{{ user.age }}</slot></span>//使用：<current-user><template v-slot:todo="slotProps">{{ slotProps.user.firstName }}</template></current-user>//簡寫：<current-user><template #todo="{ user }">{{ user.firstName }}</template></current-user>//注意默認插槽的縮寫語法不能和具名插槽混用，因為它會導致作用域不明確：

組件庫

H5+ mui:利用H5的API以及mui的一些組件及方法實現接近原生的移動端的項目搭建；vonic：利用原生開發的移動端ui組件庫，文檔我認為做的很是垃圾所以沒看明白；muse-UI:類似于bootstrup的UI組件適合于做pc端的網頁開發（動畫效果很nice）；element-UI：適合于做后臺管理系統的pc端開發；mint-UI：適用于在不使用uniapp開發基于vue的移動端開發但是vue缺少了對移動端的硬件設備的調用方法；uview-UI：適用于在使用uniapp但是對內置和擴展的組件庫不滿時使用；vant-UI：適用于小程序開發的第三方組件庫；---個人的理解。

總結

以上是生活随笔為你收集整理的vue2.0-组件的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。