场景,点击某个按钮,两个子组件交替显示
<div id='root'>
  <child-one v-if='type==="child-one"'></child-one>
  <child-two v-if='type==="child-two"'></child-two>
  <button @click='handleBtnClick'>Button</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:{
    handleBtnClick:function(){
      this.type = (this.type === 'child-one' ? 'child-two' : 'child-one')
    }
  }
})
</script>
除了上述的写法,有没有另外一种写法呢?可以通过动态组件的形式来编写这段代码
标签component
<div id='root'>
  <component :is='type'></component>
  <button @click='handleBtnClick'>Button</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:{
    handleBtnClick:function(){
      this.type = (this.type === 'child-one' ? 'child-two' : 'child-one')
    }
  }
})
</script>
把两个子组件用<component>代替,效果一模一样,component会根据数据的变化,自动加载不同的组件,一开始进来,type的值是child-one,这个时候就会去加载child-one这个组件
在第一个例子中,每次切换都要销毁一个组件,再创建一个组件,这个效率会比较低,如果可以把组件放到内存中效率就会有所提高
v-once
<div id='root'>
  <child-one v-if='type==="child-one"'></child-one>
  <child-two v-if='type==="child-two"'></child-two>
  <button @click='handleBtnClick'>Button</button>
</div> <script>
Vue.component('child-one',{
  template:'<div v-once>child-one</div>'
})
Vue.component('child-two',{
  template:'<div v-once>child-two</div>'
}) var vm = new Vue({
  el:'#root',
  data:{
    type:'child-one'
  },
  methods:{
    handleBtnClick:function(){
      this.type = (this.type === 'child-one' ? 'child-two' : 'child-one')
    }
  }
})
</script>

vuejs动态组件和v-once指令的更多相关文章

  1. vuejs动态组件给子组件传递数据

    vuejs动态组件给子组件传递数据 通过子组件定义时候的props可以支持父组件给子组件传递数据,这些定义的props在子组件的标签中使用绑定属性即可,但是如果使用的是<component> ...

  2. Vuejs——(12)组件——动态组件

    版权声明:出处http://blog.csdn.net/qq20004604   目录(?)[+]   本篇资料来于官方文档: http://cn.vuejs.org/guide/components ...

  3. angular2 学习笔记 ( Dynamic Component 动态组件)

    更新 2018-02-07 详细讲一下 TemplateRef 和 ViewContainerRef 的插入 refer : https://segmentfault.com/a/1190000008 ...

  4. h5 录音 自动生成proto Js语句 UglifyJS-- 对你的js做了什么 【原码笔记】-- protobuf.js 与 Long.js 【微信开发】-- 发送模板消息 能编程与会编程 vue2入坑随记(二) -- 自定义动态组件 微信上传图片

    得益于前辈的分享,做了一个h5录音的demo.效果图如下: 点击开始录音会先弹出确认框: 首次确认允许后,再次录音不需要再确认,但如果用户点击禁止,则无法录音: 点击发送 将录音内容发送到对话框中.点 ...

  5. vue2入坑随记(二) -- 自定义动态组件

    学习了Vue全家桶和一些UI基本够用了,但是用元素的方式使用组件还是不够灵活,比如我们需要通过js代码直接调用组件,而不是每次在页面上通过属性去控制组件的表现.下面讲一下如何定义动态组件. Vue.e ...

  6. Vue 组件&组件之间的通信 之 template模板引用与动态组件的使用

    template模板引用 在component的template中书写大量的HTML元素很麻烦. Vue提供了<template>标签,可以在里边书写HTML,然后通过ID指定到组建内的t ...

  7. 组件基础(参数校验和动态组件、v-once)—Vue学习笔记

    最最最后一点关于组件传值的问题. 提醒:本篇内容请使用Vue.js开发版!(附带完成的警告和提示) 1.组件的参数校验 父组件向子组件传值,子组件可以决定传值的一些限制. 比如,子组件指向接收Stri ...

  8. Vue.js动态组件

    动态组件: 1.定义: 几个组件放在同一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. 2.动态切换原理: 在挂载点使用<component>标签,然后使用v-bind ...

  9. Vue 动态组件、动画、插件

    1 动态组件 ①简单来说: 就是几个组件放在一个挂载点下,然后根据父组件的某个变量来决定显示哪个,或者都不显示. ②动态切换: 在挂载点使用component标签,然后使用v-bind:is=”组件名 ...

随机推荐

  1. Vuejs 实现权限管理

    程序运行时,router只配置登陆 首页404 等基本页面 import Main from '@/views/Main.vue'; // 不作为Main组件的子页面展示的页面单独写,如下 expor ...

  2. hxq的库

    在页面中使用 可以调取html模板 /** * Created by DY040 on 2017/10/31. */ var hxq = { init: function () { var self ...

  3. 记录CentOS7.X版本下安装MySQL5.7数据库

    记录CentOS7.X版本下安装MySQL5.7数据库  设置rpm下载目录在/opt目录下新建一个目录存放mysql cd /opt sudo mkdir mysql12  下载MySQL的源 wg ...

  4. java将pdf转成base64字符串及将base64字符串反转pdf

    package cn.wonders.utils; import java.io.BufferedInputStream;import java.io.BufferedOutputStream;imp ...

  5. python 进程池Pool以及Queue的用法

    import os,time,random from multiprocessing import Pool def task(name): print('正在运行的任务:%s,PID:(%s)'%( ...

  6. 获取tomcat路径

    String serverPath = System.getProperty("catalina.home");

  7. Substring Frequency (II) LightOJ - 1427 AC自动机

    https://vjudge.net/problem/LightOJ-1427 把所有模式串加入ac自动机,然后search的时候暴力,每个子串都暴力一下就好. 其实AC自动机就是,先建立好trie图 ...

  8. SSM-@Transactional 注释不生效

    1.在applicationConext.xml 中配置事务注解驱动 <!-- 事务注解驱动 --> <tx:annotation-driven /> <!-- 配置事务 ...

  9. centos6.3 配置防火墙,开启80端口、3306端口

    vi /etc/sysconfig/iptables -A INPUT -m state –state NEW -m tcp -p tcp –dport 80 -j ACCEPT(允许80端口通过防火 ...

  10. asp实现网页浏览总数

    <% AlldayView=0 Set Rs=Server.CreateObject("Adodb.RecordSet") Sql="select * from v ...