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;

 

转载于:https://www.cnblogs.com/wkyuan/p/11313577.html