场景,点击某个按钮,两个子组件交替显示
<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. JAVA HTTP请求和HTTPS请求

    HTTP与HTTPS区别:http://blog.csdn.net/lyhjava/article/details/51860215 URL发送 HTTP.HTTPS:http://blog.csdn ...

  2. 使用ServletContainerInitializer动态注册组件

    1.背景 在web容器(例如tomcat)启动时为提供给第三方组件机会做一些初始化的工作,例如注册servlet或者filtes等.对此servlet规范提供了ServletContainerInit ...

  3. https Android 5.0 以下TLS 版本过低造成的问题

    异常如下 javax.net.ssl.SSLHandshakeException: javax.net.ssl.SSLProtocolException: SSL handshake aborted: ...

  4. C++之构造函数、拷贝类型

    无参数的构造函数适合没初始化值的初始化对象,而引用拷贝适合创建对象时用另一个对象对其初始化,如果此时用的是浅拷贝则释放一个对象内存时系统会释放2次从而出错(因为它指向同一个内存),深拷贝就不存在这个问 ...

  5. 关于火狐不响应event.keyCode解决方法

    <body onkeydown="enterkey(event)"> <!-- 点击键盘即触发 enterkey函数 --> function enterk ...

  6. 实现Nginx中使用PHP-FPM时记录PHP错误日志的配置方法

    最近在本地搭建的LNMP的开发环境.为了开发的时候不影响前端的正常开发就屏蔽的PHP里面php.ini中的一些错误提示.但是这样一来,就影响到了后端开发的一些问题比如不能及时调试开发中的一些问题 ng ...

  7. web.xml文件配置详解以及实例说明

    1.web.xml学名叫部署描述符文件,是在Servlet规范中定义的,是web应用的配置文件. 2.部署描述符文件就像所有XML文件一样,必须以一个XML头开始.这个头声明可以使用的XML版本并给出 ...

  8. C#操作Excel报错:服务器出现意外情况。

    C#操作Excel表格时,如遇以下错误: 服务器出现意外情况.(异常来自 HRESULT:0x80010105(RPC_E_SERVERFAULT)) 解决方案: 打开你电脑中的Office-Exce ...

  9. idea创建Javaweb项目

    1.Javaweb项目结构 1.1修改生成.class文件的位置为WEB-INF下的classes: 生成的.class文件位置: 1.2 设置第三方jar包添加位置:

  10. Hibernate课程 初探一对多映射4-2 cascade级联属性

    1 级联属性:hibernate一方和多方设置关联关系,当一方发生相应修改时(见下表),多方不用进行显式修改,也能进行相应修改.   级联在一方和多方xml中都可以设置 属性值 含义和作用 all 对 ...