Vue.js学习笔记——14.组件化开发（四）

最新推荐文章于 2024-03-16 14:38:13 发布

原创最新推荐文章于 2024-03-16 14:38:13 发布 · 182 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #学习 #javascript

Vue.js学习笔记专栏收录该内容

17 篇文章

订阅专栏

九、动态组件

有时我们需要在不同的组件间进行动态的切换，比如一个多标签的页面
多标签页面
以上可以通过使用<component>标签搭配is属性来实现。
用法：

<!-- 组件会在 `currentTabComponent` 改变时改变 -->
<component v-bind:is="currentTabComponent"></component>

其中currentTabComponent可以是：

已注册组件的名字
一个组件的选项对象

写一个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <button @click="switchCpn">切换组件</button>
  <component :is="cpnList"></component>
</div>
<template id="cpn">
  <div>
    <h2>我是组件cpn</h2>
    <p>我是cpn的内容</p>
  </div>
</template>
<template id="cpn2">
  <div>
    <h2>我是组件cpn2</h2>
    <p>我是cpn2的内容</p>
  </div>
</template>
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      cpnList: 'cpn'
    },
    components: {
      cpn:{
        template:'#cpn'
      },
      cpn2:{
        template:'#cpn2'
      }
    },
    methods: {
    //点击按钮切换cpnList的值
      switchCpn() {
        this.cpnList == 'cpn' ? this.cpnList='cpn2' : this.cpnList='cpn'
      }
    }
  })
</script>
</body>
</html>

执行结果：

可以看到，当is绑定的cpnList改变时，渲染的组件随之改变，每次切换组件时都会重新渲染一个新的组件实例。

十、在动态组件上使用keep-alive

到此为止，动态组件实现的效果，好像v-if也同样能实现，但是，当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重新渲染导致的性能问题。
引用官方的例子：
多标签页面
如果你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，是不会继续展示你之前选择的文章的。这是因为你每次切换新标签的时候，Vue 都创建了一个新的实例。
为了解决这个问题，我们可以用一个<keep-alive>标签将其动态组件包裹起来，让里面的组件实例能够被在它们第一次被创建的时候缓存下来。
用法：

<!-- 失活的组件将会被缓存！-->
<keep-alive>
  <component v-bind:is="currentTabComponent"></component>
</keep-alive>

<keep-alive> 是一个抽象组件：它自身不会渲染一个 DOM 元素，也不会出现在组件的父组件链中。
写个简单的例子：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<div id="app">
  <button @click="switchCpn">切换组件</button>
  <component :is="cpnList"></component>
  <keep-alive>
    <component :is="cpnList"></component>
  </keep-alive>
</div>

<template id="cpn">
  <div>
    <h2>我是组件cpn</h2>
    <input>
  </div>
</template>

<template id="cpn2">
  <div>
    <h2>我是组件cpn2</h2>
    <p>我是cpn2的内容</p>
  </div>
</template>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script>
  const app = new Vue({
    el: "#app",
    data: {
      cpnList: 'cpn'
    },
    components: {
      cpn:{
        template:'#cpn'
      },
      cpn2:{
        template:'#cpn2'
      }
    },
    methods: {
    //点击按钮切换cpnList的值
      switchCpn() {
        this.cpnList == 'cpn' ? this.cpnList='cpn2' : this.cpnList='cpn'
      }
    }
  })
</script>
</body>
</html>