vue中的动态组件

约定不等于承诺〃 2022-04-16 02:00 383阅读 0赞
  1. 动态组件是由vue内置标签component上的is属性确定的，is属性的值，就是组件的名字

第二种方法，用v-for，需要注意的是，type的值只是用来做标识的

  1. <div id="app">
  2.         <component :is="type"></component>
  3.        <!-- <child-one v-if="type === 'child-one'"></child-one>
  4.        <child-two v-if="type === 'child-two'"></child-two> -->
  5.        <button @click="toggle">click me</button>
  6.     </div>
  7.     <script>    
  8.         Vue.component( 'child-one', {
  9.             template: `<div>child-one</div>`,
  10.         })
  11.         Vue.component('child-two', {
  12.             template: `<div>child-two</div>`
  13.         })
  14.         var vm = new Vue({
  15.             el: '#app',
  16.             data: {
  17.                 type: 'child-one'
  18.             },
  19.             methods: {
  20.                 toggle(){
  21.                     this.type = (this.type === 'child-one' ? this.type = 'child-two' : this.type = 'child-one')
  22.                 }
  23.             }
  24.         })
  25.     </script>

20181115155923779.png

同时要注意：局域组件好像不可以实现动态组件，刚用局域组件写的时候，总是报错

上述的切换存在一定的问题：组件一和组件二来回切换的过程，底层原理是：销毁一个创建一个，然后点击切换的过程中其实就是销毁和创建的切换，这样非常浪费性能

（1）知识点：v-once，作用：带有v-once指令的标签，会缓存，这样下次调用该标签的时候，直接去缓存中取

  1. <div id="app">
  2.         <!-- <component :is="type"></component> -->
  3.        <child-one v-if="type === 'child-one'"></child-one>
  4.        <child-two v-if="type === 'child-two'"></child-two>
  5.        <button @click="toggle">click me</button>
  6.     </div>
  7.     <script>    
  8.         Vue.component( 'child-one', {
  9.             template: `<div v-once>child-one</div>`,
  10.         })
  11.         Vue.component('child-two', {
  12.             template: `<div v-once>child-two</div>`
  13.         })
  14.         var vm = new Vue({
  15.             el: '#app',
  16.             data: {
  17.                 type: 'child-one'
  18.             },
  19.             methods: {
  20.                 toggle(){
  21.                     this.type = (this.type === 'child-one' ? this.type = 'child-two' : this.type = 'child-one')
  22.                 }
  23.             }
  24.         })
  25.     </script>

（2）可以通过标签来缓存动态组件

  1. <keep-alive>
  2.     <component :is="type"></component>
  3. </keep-alive>

发表评论

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

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

相关阅读

    相关 Vue 动态组件

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

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

    相关 Vue动态组件

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

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

    相关 vue中动态渲染组件的方法

    在项目中，我们会经常遇到动态加载不同组件（内容）的场景，也就是想通过一个页面，根据不同的参数或者条件，来加载不同的内容。那在vue里，给大家提供了一个很简单的方法，使用comp

    左手的ㄟ右手左手的ㄟ右手/ 0 赞/ 1164 阅读