Vue 动态组件与 v-once 指令的实现

网络编程 2025/3/19 佚名

3 2 1

明霞山资源网 Design By www.htccd.com

本文介绍了Vue 动态组件与 v-once 指令的实现，分享给大家，具体如下：

<div id="root">
  <child-one></child-one>
  <child-two></child-two>
  <button>change</button>
</div>
Vue.component('child-one', {
  template: `<div>child-one</div>`,
})
Vue.component('child-two', {
  template: `<div>child-two</div>`,
})
let vm = new Vue({
  el: '#root'
})

上面代码需实现，当点击按钮时，child-one和child-two实现toggle效果，该怎么实现呢？

<div id="root">
  <child-one v-if="type === 'child-one'"></child-one>
  <child-two v-if="type === 'child-two'"></child-two>
  <button @click="handleBtnClick">change</button>
</div>
Vue.component('child-one', {
  template: `<div>child-one</div>`,
})
Vue.component('child-two', {
  template: `<div>child-two</div>`,
})
let vm = new Vue({
  el: '#root',
  data: {
    type:'child-one'
  },
  methods: {
    handleBtnClick(){
      this.type = this.type === 'child-one' "htmlcode">

<div id="root">
  <component :is="type"></component>   //is内容的变化，会自动的加载不同的组件
  <button @click="handleBtnClick">change</button>
</div>
Vue.component('child-one', {
  template: `<div>child-one</div>`,
})
Vue.component('child-two', {
  template: `<div>child-two</div>`,
})
let vm = new Vue({
  el: '#root',
  data: {
    type:'child-one'
  },
  methods: {
    handleBtnClick(){
      this.type = this.type === 'child-one' "htmlcode">

Vue.component('child-one', {
  template: `<div v-once>child-one</div>`,
})
Vue.component('child-two', {
  template: `<div v-once>child-two</div>`,
})



加上v-once指令之后，有什么好处呢？当chlid-one组件第一次被渲染时，因为组件上面有一个v-once指令，所以它直接就放到内存里了，当切换的时候child-two组件第一次被渲染时，它也会被放到内存里，再次点击切换时，这时并不需要再重新创建一个child-one组件了，而是从内存里直接拿出以前的child-one组件，它的性能会更高一些。
所以在 Vue 当中，通过v-once指令，可以提高一些静态内容的展示效率


以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

v-once,指令,Vue,动态组件,Vue,v-once,动态组件