Vue动态组件与v-once指令
JavaScript 2019-03-15 2050 0
07:48:09
有的时候，在不同组件之间进行动态切换是非常有用的，比如在一个多标签的界面里，点击组件A显示组件A的内容，点击组件B显示组件B的内容，要怎么来做呢？
动态组件
先看一下基础的写法：
- <button @click="handleBtnClickA">我是child-a</button>
- <button @click="handleBtnClickB">我是child-b</button>
- <child-a v-if="typeA==='child-a'"></child-a>
- <child-b v-if="typeB==='child-b'"></child-b>
上述内容还可以通过 Vue 的为组件元素加一个特殊的is特性来实现：
- <button @click="handleBtnClickA">我是child-a</button>
- <button @click="handleBtnClickB">我是child-b</button>
- <child-a :is="typeA"></child-a>
- <child-b :is="typeB"></child-b>
效果：
v-once
只渲染元素和组件一次。随后的重新渲染，元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。我的理解就是使用v-once之后，再次刷新不会重新渲染使用v-once的元素或者组件，而是直接从内存拿来用。
具体用法：
- template: '<div v-once>我是child-a</div>'
在需要使用的地方添加v-once即可。
发表评论