有的时候,在不同组件之间进行动态切换是非常有用的,比如在一个多标签的界面里,点击组件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
即可。
微信小程序
互联网开发,终身学习者,欢迎您的关注!