Vue.js学习笔记——14.组件化开发(四)


Vue.js学习笔记——10.组件化开发(一)
Vue.js学习笔记——11.组件化开发(二)
Vue.js学习笔记——12.组件化开发(三)

九、动态组件

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

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

其中currentTabComponent可以是:

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

写一个简单的例子:

<!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>

执行结果:
切换组件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值