Vue动态组件

╰+攻爆jí腚メ 2022-08-30 01:56 311阅读 0赞

Vue动态组件

  • 1、序言
  • 2、实例

1、序言

  在页面应用程序中，经常会遇到多标签页面，在Vue.js中，可以通过动态组件来实现。组件的动态切换是通过在<component>元素上使用is属性实现的。

2、实例

  实现效果如下：
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
  上图中的3个标签是3个按钮，下面的内容部分由组件来实现，3个按钮对应3个组件，按钮响应click事件，单机不同按钮时切换至不同的组件，组件切换通过<component>元素和其上的is属性实现。
  3个组件的实现代码如下：

  1. app.component('tab-introduce', {  
  2.                 data(){ 
  3.                     return { 
  4.                         content: 'Java无难事'
  5.                     }
  6.                 },
  7.                 template: '<div><input v-model="content"></div>'
  8.             })
  9.             app.component('tab-comment', {  
  10.                 template: '<div>这是一本好书</div>' 
  11.             })
  12.             app.component('tab-qa', {  
  13.                 template: '<div>有人看过吗？怎么样？</div>' 
  14.             })

  第一个组件的模板使用了一个<input>元素，便于我们修改内容，这主要是为了引出后面的知识点。
  在根实例中定义了两个数据属性和一个计算属性，主要是为了便于使用v-for指令循环渲染button按钮，以及动态切换组件。代码如下所示：

  1. const app = Vue.createApp({ 
  2.                 data() { 
  3.                     return { 
  4.                         currentTab: 'introduce',
  5.                         tabs: [
  6.                             { title: 'introduce', displayName: '图书介绍'}, 
  7.                             { title: 'comment', displayName: '图书评价'},
  8.                                { title: 'qa', displayName: '图书问答'}
  9.                         ]
  10.                     }
  11.                 },
  12.                 computed: { 
  13.                     currentTabComponent: function () { 
  14.                       return 'tab-' + this.currentTab
  15.                     }
  16.                 }
  17.             })

  数据属性currentTab代表当前的标签页，tabs是一个数组对象，通过v-for指令渲染代表标签的3个按钮，计算属性currentTabComponent代表当前选中的组件。
  接下来就是在与实例关联的DOM模板中渲染按钮，以及动态切换组件的代码。代码如下所示：

  1. <div id="app">
  2.             <button v-for="tab in tabs" :key="tab.title" :class="['tab-button', { active: currentTab === tab.title }]" @click="currentTab = tab.title">
  3.                 {
  4.    { tab.displayName }}
  5.             </button>
  6.             <keep-alive>
  7.                 <component :is="currentTabComponent" class="tab">
  8.                 </component>
  9.             </keep-alive>
  10.         </div>

  当单击某个标签按钮时，更改数据属性currentTab的值，这将导致计算属性currentTabComponent的值更新，<component>元素的is属性使用v-bind指令绑定到一个已注册的名字上，随着计算属性currentTabComponent值的改变，组件也就自动切换了。
  剩下的就是CSS样式的设置了。完整的代码如下：

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <meta charset="UTF-8">
  5.         <title>动态组件</title>
  6.         <style> div { width: 400px; } .tab-button { padding: 6px 10px; border-top-left-radius: 3px; border-top-right-radius: 3px; border: solid 1px #ccc; cursor: pointer; background: #f0f0f0; margin-bottom: -1px; margin-right: -1px; } .tab-button:hover { background: #e0e0e0; } .tab-button .active { background: #cdcdcd; } .tab { border: solid 1px #ccc; padding: 10px; } </style>
  7.     </head>
  8.     <body>
  9.         <div id="app">
  10.             <button v-for="tab in tabs" :key="tab.title" :class="['tab-button', { active: currentTab === tab.title }]" @click="currentTab = tab.title">
  11.                 {
  12.    { tab.displayName }}
  13.             </button>
  14.             <keep-alive>
  15.                 <component :is="currentTabComponent" class="tab">
  16.                 </component>
  17.             </keep-alive>
  18.         </div>
  20.         <script src="https://unpkg.com/vue@next"></script>
  21.         <script> const app = Vue.createApp({ data() { return { currentTab: 'introduce', tabs: [ { title: 'introduce', displayName: '图书介绍'}, { title: 'comment', displayName: '图书评价'}, { title: 'qa', displayName: '图书问答'} ] } }, computed: { currentTabComponent: function () { return 'tab-' + this.currentTab } } }) app.component('tab-introduce', { data(){ return { content: 'Java无难事' } }, template: '<div><input v-model="content"></div>' }) app.component('tab-comment', { template: '<div>这是一本好书</div>' }) app.component('tab-qa', { template: '<div>有人看过吗？怎么样？</div>' }) app.mount('#app'); </script>
  22.     </body>
  23. </html>

  上述代码中的第一个组件模板使用了一个<input>元素，因此可以修改该组件的内容，修改后，切换到其他标签页，然后再切换回来，你会发现之前修改的内容并没有保存下来，这是因为每次切换新标签的时候，Vue都创建一个新的currentTabComponent实例。在本例中，希望组件在切换的时候，可以保持组件的状态，以避免重复渲染导致的性能问题，也为了让用户的体验更好。要解决这个问题，可以用一个<keep-alive>元素将动态组件包裹起来。代码如下所示：

  1. <keep-alive>
  2.                 <component :is="currentTabComponent" class="tab">
  3.                 </component>
  4. </keep-alive>

渲染结果：
在这里插入图片描述
修改
在这里插入图片描述
切换标签之后
在这里插入图片描述
  可以看到，组件的状态被保存了下来。

发表评论

表情：
评论列表 （有 0 条评论，311人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue 动态组件

    动态组件 通过使用保留的 <component> 元素，并对其 is 特性进行动态绑定，你可以在同一个挂载点动态切换多个组件： var vm = new Vue

    傷城~傷城~/ 0 赞/ 99 阅读

    相关 Vue动态组件

    Vue动态组件 1、序言 2、实例 1、序言   在页面应用程序中，经常会遇到多标签页面，在Vue.js中，可以通过动态组件来实现。组件的动态切换是通

    ╰+攻爆jí腚メ╰+攻爆jí腚メ/ 0 赞/ 312 阅读