Vue学习-动态组件

作用：

实现组件的动态切换，加载组件。如：实现页面的转换效果
本节主要使用一个按钮来实现两个页面的跳转，来讲解Vue内置的component组件的用法。

component语法:

<component :is="要加载的组件名称"></component>

演示如何动态加载组件

在.vue文件中 < template > 中书写组件的模板，在 < script >标签中书写要用到的JavaScript代码。
描述： 点击按钮可以实现组件的替换。
ComponentA.vue 组件:

<template>
  <h2>A组件</h2>
</template>

<script>
export default {
  name: 'ComponentA'
}
</script>

ComponentB.vue 组件:

<template>
  <h2>B组件</h2>
</template>

<script>
export default {
  name: 'ComponentB'
}
</script>

Common.vue 组件用来动态渲染组件的父组件：

<template>
	<div>
    <h1>动态组件演示</h1>
    <hr>
    <div>
      <button @click="changeAorB">切换页面</button>
    </div>
    <div>
      <component :is="isComp"></component>
    </div>
  </div>
</template>

<script>
// 要实现动态组件，需先要导入需要的组件
import ComponentA from './CompentA.vue';
import ComponentB from './CompentB.vue';
export default {
  data () {
    return {
      isComp: 'ComponentA' // 定义用来显示哪个组件的字符串变量，初始化为A组件
    }
  },
  components: { // 把导入的组件注册为局部组件
    ComponentA,
    ComponentB
  },
  methods: {
    changeAorB: function() { // 使用三元表达式来判断是渲染哪个组件
      this.isComp = this.isComp == 'ComponentA' ? 'ComponentB' : 'ComponentA';
    }
  }
}
</script>

实现的效果展示：
点击切换页面就可以切换组件。

使用一个案例来继续分析动态加载组件：

案例描述：在上面完成的页面切换的基础上，在子组件ComponentA组件中添加一个显示数字的p标签和一个使数字加1的按钮；在子组件ComponentB组件中添加一个显示数字的p标签和一个使数字减10的按钮。注：两个组件的数据是独立的。
ComponentA.vue 组件：

<template>
  <div>
    <p>{{countA}}</p>
    <div>
      <button @click="countA += 1">+1</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ComponentA',
  data () {
    return {
      countA: 0
    }
  }
}
</script>

ComponentB.vue 组件：

<template>
  <div>
    <p>{{countB}}</p>
    <div>
      <button @click="countB -= 10">-10</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ComponentB',
  data () {
    return {
      countB: 100
    }
  }
}
</script>

实现的效果：


效果描述： 点击切面页面会切换组件，当点击A页面中加1按钮后数字会加1，当点击B页面中减10按钮后数字会减10。
问题： 点击切换页面后数据会显示为本来的数据，而不会保留之前的改变。
解释： 使用component动态加载组件时，当切换组件时原先的组件会被销毁，新的组件会被创建并显示，所以就导致了数据不会改变。
解决： 使用Vue提供的< keep-alive> 标签包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。

keep-alive 元素

作用： 包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
属性：

• include - 字符串或正则表达式。只有名称匹配的组件会被缓存。
• exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存。
• max - 数字。最多可以缓存多少组件实例。

属性 include 和 exclude 是存在优先级的：
优先级： exclude > include
属性值的写法：

<!-- 逗号分隔字符串 -->
<keep-alive include="a,b">
  <component :is="view"></component>
</keep-alive>

<!-- 正则表达式 (使用 `v-bind`) -->
<keep-alive :include="/a|b/">
  <component :is="view"></component>
</keep-alive>

<!-- 数组 (使用 `v-bind`) -->
<keep-alive :include="['a', 'b']">
  <component :is="view"></component>
</keep-alive>

演示：

1. 如果只添加了 keep-alive 元素，而不添加属性时，会默认把里面的都进行缓存起来。
   Common.vue 组件:

<template>
  <div>
    <h1>动态组件演示</h1>
    <hr>
    <div>
      <button @click="changeAorB">切换页面</button>
    </div>
    <div>
      <!-- 
        默认不加属性时，keep-alive 会把里面的都缓存起来
      -->
      <keep-alive>
        <component :is="isComp"></component>
      </keep-alive>
    </div>
  </div>
</template>

2. 当添加 include 属性指定一个组件时，被指定的组件就会被缓存起来，没有被指定的组件不会被缓存起来。
   Common.vue 组件:

<template>
  <div>
    <h1>动态组件演示</h1>
    <hr>
    <div>
      <button @click="changeAorB">切换页面</button>
    </div>
    <div>
      <!-- 
        添加 include 属性指定组件时，被指定的组件会被缓存起来
      -->
      <keep-alive include="ComponentB">
        <component :is="isComp"></component>
      </keep-alive>
    </div>
  </div>
</template>

3. 使用 exclude 属性指定不缓存的组件时，被指定的组件不会被缓存起来，没有被指定的组件会被缓存起来。
   Common.vue 组件:

<template>
  <div>
    <h1>动态组件演示</h1>
    <hr>
    <div>
      <button @click="changeAorB">切换页面</button>
    </div>
    <div>
      <!-- 
        使用 exclude 属性指定不换存的组件时，被指定的组件不会缓存，没指定的组件会被缓存
      -->
      <keep-alive exclude="ComponentB">
        <component :is="isComp"></component>
      </keep-alive>
    </div>
  </div>
</template>

4. 使用 max 属性可以指定被缓存的组件个数。