Vue动态组件与v-once指令

2019年3月15日07:48:09 发表评论 阅读(1,849)

Vue动态组件与v-once指令

有的时候,在不同组件之间进行动态切换是非常有用的,比如在一个多标签的界面里,点击组件A显示组件A的内容,点击组件B显示组件B的内容,要怎么来做呢?

动态组件

先看一下基础的写法:

  1. <button @click="handleBtnClickA">我是child-a</button>
  2. <button @click="handleBtnClickB">我是child-b</button>
  3. <child-a v-if="typeA==='child-a'"></child-a>
  4. <child-b v-if="typeB==='child-b'"></child-b>

上述内容还可以通过 Vue 的为组件元素加一个特殊的is特性来实现:

  1. <button @click="handleBtnClickA">我是child-a</button>
  2. <button @click="handleBtnClickB">我是child-b</button>
  3. <child-a :is="typeA"></child-a>
  4. <child-b :is="typeB"></child-b>

效果:

Vue动态组件与v-once指令

v-once

只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。我的理解就是使用v-once之后,再次刷新不会重新渲染使用v-once的元素或者组件,而是直接从内存拿来用。

具体用法:

  1. template: '<div v-once>我是child-a</div>'

在需要使用的地方添加v-once即可。

 

weinxin
微信小程序
互联网开发,终身学习者,欢迎您的关注!
舍得

发表评论

不高兴 彩虹 吃瓜 丢翔 乖 滑稽 花心 惊哭 惊讶 挤眼 酷 伤心 帅吗? 礼物 玫瑰 怒 生气 喷 睡觉 太开心 小九九 啊
太阳 吐舌 委屈 笑眼 星星月亮 心碎 咦 阴险 疑问 真棒 偷笑 斜眼笑 震惊 略 哈欠 无奈哭 抠鼻 哼 期待 懒得理你 爱心 蜡烛