Vue 开发技巧（二）

最新推荐文章于 2024-09-13 14:34:15 发布

2301_76433421

最新推荐文章于 2024-09-13 14:34:15 发布

阅读量81

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/2301_76433421/article/details/128929842

版权

使用动态组件：动态组件可以在不重新渲染整个页面的情况下切换显示内容

<template>
  <div>
    <component :is="selectedComponent"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  data () {
    return {
      selectedComponent: 'component-a'
    }
  },
  components: {
    'component-a': ComponentA,
    'component-b': ComponentB
  }
}
</script>

使用了 component 组件来渲染动态组件。通过 :is 属性，可以动态地指定要渲染的组件。在 data 中，定义了一个 selectedComponent 变量来存储当前要渲染的组件的名称。当 selectedComponent 的值发生变化时，动态组件会自动切换显示的内容，而不会重新渲染整个页面。