zoukankan      html  css  js  c++  java
  • [Vue @Component] Dynamic Vue.js Components with the component element

    You can dynamically switch between components in a template by using the reserved <component> element and dynamically bind to its is attribute. By using <keep-alive> you can tell Vue to keep the component in memory.

    In the previous post about dynamic component

    <component :is="selectedComp"></component>
    
    <script>
    import Vue from "vue"
    import { Component, Prop } from "vue-property-decorator"
    
    const One = {
      functional: true,
      name: "One",
      render: h => <h1 class="bg-red">One</h1>
    }
    
    const Two = {
      functional: true,
      name: "Two",
      render: h => <h1 class="bg-green">Two</h1>
    }
    
    const Three = {
      functional: true,
      name: "Three",
      render: h => <h1 class="bg-purple">Three</h1>
    }
    
    @Component({
      components: {
    
      }
    })
    export default class App extends Vue {
      comps = [One, Two, Three]
      selectedComp = this.comps[0]
    }
    </script>

    Because inside @Component({components: {}}) haven't register those component 'One, Two, Three', so then using 

    <component :is="selectedComp"></component>

    'selectedComp' has to ben a real functional component. 

    But If we have registered the components:

    @Component({
      components: {
         One, Two, Three
      }
    })

    The the 'selectedComp' can be just component's name:

    selectedComponent = 'One' | 'Two' | 'Three'

    <keep-alive> Component: 

    Components might have some state, you want to keep the state instead of losting it, you can use 'keep-alive' component:

    <keep-alive>
        <component v-bind:is="currentView" v-bind:initial-quantity="item.quantity" v-bind:name="item.text" v-bind:diet="item.diet"></component>
    </keep-alive>

  • 相关阅读:
    Js--Array类型1
    利用js生成一个在线考试系统
    在Asp.net core 项目中操作Mysql数据库
    Unity游戏接入TypeSDK集成笔记
    第一篇博客
    两次面试
    [OC笔记] static 关键字
    cellForRowAtIndexPath方法不执行的那些坑
    一行代码设置UITableView分割线的长度
    [转载]iOS开发:获取设备信息
  • 原文地址:https://www.cnblogs.com/Answer1215/p/9374566.html
Copyright © 2011-2022 走看看