动态组件和v-once指令

最新推荐文章于 2020-02-21 00:09:44 发布

哒玲

最新推荐文章于 2020-02-21 00:09:44 发布

阅读量138

点赞数 1

分类专栏： vue基础学习文章标签：动态组件 v-once

本文链接：https://blog.csdn.net/zl13015214442/article/details/87904915

版权

vue基础学习专栏收录该内容

15 篇文章 0 订阅

订阅专栏

1、动态组件
我们首先看一个例子，首先定义两个子组件，要实现的功能是点击change按钮，进行两个组件的切换：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态组件与v-once指令</title>
  <script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
  <div id="root">
    <child-one v-if="type==='child-one'"></child-one>
    <child-two v-if="type==='child-two'"></child-two>
    <button @click="handleChange">change</button>
  </div>

  <script>
    Vue.component('child-one',{
      template:'<div>child-one</div>'
    })
    Vue.component('child-two',{
      template:'<div>child-two</div>'
    })
    var vm=new Vue({
      el:"#root",
      data:{
        type:'child-one'
      },
      methods:{
        handleChange:function () {
          this.type = this.type==="child-one" ? "child-two" : "child-one";
        }
      }
    })
  </script>
</body>
</html>

相同的功能用动态组件来实现，代码非常简单：

<div id="root">
    <!--component指的就是一个动态组件-->
    <component :is="type"></component>  
    <button @click="handleChange">change</button>
  </div>

2、v-once指令
在每一次切换组件时，就是一个销毁在重新构建的过程，v-once指令避免了这种模式，提高了性能。

<body>
  <div id="root">
    <component :is="type"></component>
    <button @click="handleChange">change</button>
  </div>
  <script>
    Vue.component('child-one',{
      template:'<div v-once>child-one</div>'  /*v-once指令可以使vue底层
      无需在每次切换组件的时候销毁另一个组件，提高了性能*/
    })
    Vue.component('child-two',{
      template:'<div v-once>child-two</div>'
    })
    var vm=new Vue({
      el:"#root",
      data:{
        type:'child-one'
      },
      methods:{
        handleChange:function () {
          this.type=this.type==='child-one'?'child-two':'child-one'
        }
      }
    })
  </script>
</body>

哒玲

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
动态组件和v-once指令

1、动态组件我们首先看一个例子，首先定义两个子组件，要实现的功能是点击change按钮，进行两个组件的切换：&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;动态组件与v-once指令&lt;/title&
复制链接

扫一扫