Vue組件詳解----高級用法

1.動態組件

Vue.js 提供了一個特殊的元素<component> 用來動態地掛載不同的組件， 使用is特性來選擇要掛載的組件。
示例如下：

 <div id="app21">
       <component :is="currentView"></component>
       <button @click="changeView('A')">切換到A</button>
       <button @click="changeView('B')">切換到B</button>
       <button @click="changeView('C')">切換到C</button>
   </div>

 

var app21 =  new Vue({
   el: '#app21',
   data: {
     currentView: 'comA'
   },
   methods: {
       changeView: function(data){
           this.currentView = 'com'+ data　　//動態地改變currentView的值就可以動態掛載組件了。
       }
   },
   components: {
       comA: {
           template: '<div>組件A</div>'
       },
       comB: {
           template: '<div>組件B</div>'
       },
       comC: {
           template: '<div>組件C</div>'
       }
   }
});

 

2,遞歸組件

組件在它的模板內可以遞歸地調用自己， 只要給組件設置name 的選項就可以了。

示例如下：

 <div id="app19">
     <my-component19 :count="1"></my-component19>
 </div>

Vue.component('my-component19',{
   name: 'my-component19',  //其實當你利用 Vue.component 全局注冊了一個組件，全局的ID會被自動設置為組件的name。
   props: {
     count: {
         type: Number,
         default: 1
     }
   },
   template: '<div><my-component19 :count="count+1" v-if="count<3"></my-component19></div>'
});

var app19 =  new Vue({
   el: '#app19'
});

 

渲染結果為：

<div id="app19">
   <div>
       <div>
           <div><!----></div>
       </div>
   </div>
</div>

設置name 后，在組件模板內就可以遞歸使用了，不過需要注意的是，必須給一個條件來限制遞歸數量，否則會拋出錯誤： max stack size exceeded 。
組件遞歸使用可以用來開發一些具有未知層級關系的獨立組件，比如級聯選擇器和樹形控件等。

3.組件卡槽solt

3.1 第一種用法

父組件:

 <templateSolt></templateSolt>
 <templateSolt>
      <p>slot分發了內容</p>
</templateSolt>


子組件:

<div>
  <h1>這是slot子組件</h1>
  <slot>
     如果slot沒有分發內容。
  </slot>
</div>

效果圖如下:

 

我得理解，slot在父組件有內容時，顯示為父組件得內容，覆蓋了子組件，如果父組件沒有內容，則顯示子組件

3.2 第二種用法

這種用法是我們用得比較多得，這種是具名得slot

父組件

   <templateSlotNamed>
      <h1 slot="footer">footer</h1>
      <h1 slot="header">header</h1>
      <h1>Default content</h1>
   </templateSlotNamed>


子組件

 <div>
   <slot name="header"></slot>
   <slot></slot>
   <slot name="footer"></slot>
</div>

效果圖如下：

 

我把父組件的header和footer更換了位置，
是為了證明一件事，就是實際內容的顯示是由子組件的位置決定的。

4. 異步組件：頁面需要用到時候才從服務端加載的組件。

原理：利用webpack對代碼進行分割是異步調用組件前提。下面介紹的是怎么實現異步組件。

案例：

首先是組件，創建四個組件分別命名為first、second、three和four；內容如下:

first
<template>
<div>我是第一個頁面</div>
</template>
 
second
<template>
<div>我是第二個頁面</div>
</template>
 
three
<template>
<div>我是第三個頁面</div>
</template>
 
four
<template>
<div>我是第四個頁面</div>
</template>

 

路由index.js代碼，異步組件方式有兩種，代碼中的方案1和方案2；注意：方案1需要添加 syntax-dynamic-import 插件

import Vue from 'vue'
import VueRouter from 'vue-router'
/*import First from '@/components/First'
import Second from '@/components/Second'*/
   
Vue.use(VueRouter)
//方案1
const first =()=>import(/* webpackChunkName: "group-foo" */ "../components/first.vue");
const second = ()=>import(/* webpackChunkName: "group-foo" */ "../components/second.vue");
const three = ()=>import(/* webpackChunkName: "group-fooo" */ "../components/three.vue");
const four = ()=>import(/* webpackChunkName: "group-fooo" */ "../components/four.vue");
//方案2
const first = r => require.ensure([], () => r(require('../components/first.vue')), 'chunkname1')
const second = r => require.ensure([], () => r(require('../components/second.vue')), 'chunkname1')
const three = r => require.ensure([], () => r(require('../components/three.vue')), 'chunkname2')
const four = r => require.ensure([], () => r(require('../components/four.vue')), 'chunkname2')
 
//懶加載路由
const routes = [
 {   //當首次進入頁面時，頁面沒有顯示任何組件；讓頁面一加載進來就默認顯示first頁面
 path:'/', //重定向，就是給它重新指定一個方向，加載一個組件；
 component:first
 },
 {
 path:'/first',
 component:first
 },
 {
 path:'/second',
 component:second
 }, {
 path:'/three',
 component:three
 },
 {
 path:'/four',
 component:four
 }
//這里require組件路徑根據自己的配置引入
]
//最后創建router 對路由進行管理，它是由構造函數 new vueRouter() 創建，接受routes 參數。
   
 const router = new VueRouter({
 routes
})
   
export default router;