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>

[Vue @Component] Dynamic Vue.js Components with the component element的更多相关文章

  1. [Vue] Dynamic Vue.js Components with the component element

    You can dynamically switch between components in a template by using the reserved <component>  ...

  2. vue报错[Vue warn]: Unknown custom element: <router-Link> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

    vue浏览器报错,如下 vue.runtime.esm.js?2b0e:619 [Vue warn]: Unknown custom element: <router-Link> - di ...

  3. 前端框架vue.js系列(9):Vue.extend、Vue.component与new Vue

    前端框架vue.js系列(9):Vue.extend.Vue.component与new Vue 本文链接:https://blog.csdn.net/zeping891103/article/det ...

  4. Vue报错之" [Vue warn]: Unknown custom element: <wzwzihello> - did you register the component correctly? For recursive components, make sure to provide the "name" option."

    一.报错截图 [Vue warn]: Unknown custom element: <wzwzihello> - did you register the component corre ...

  5. [Vue @Component] Extend Vue Components in TypeScript

    This lesson shows how you can extend and reuse logic in Vue components using TypeScript inheritance. ...

  6. [Vue @Component] Pass Props Between Components with Vue Slot Scope & renderless component

    Components with slots can expose their data by passing it into the slot and exposing the data using  ...

  7. [Vue @Component] Load Vue Async Components

    Vue provides a straight-forward syntax for loading components at runtime to help shave off initial b ...

  8. 使用Vue自定义组件时,报did you register the component correctly? For recursive components, make sure to provide the "name" option.(未注册组件)的原因之一

    错误信息: [Vue warn]: Unknown custom element: <list> - did you register the component correctly? F ...

  9. [Vue warn]: Unknown custom element: <sapn> - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in ---> <Evaluate> at src/views/index/

    关于vue报错: [Vue warn]: Unknown custom element: <sapn> - did you register the component correctly ...

随机推荐

  1. EasyUI系列学习(九)-Panel(面板)

    一.加载方式 1.class加载 <div class="easyui-panel" title="面板一" style="width:500p ...

  2. Scala-基础-函数(1)

    import junit.framework.TestCase //函数(1) class Demo5 extends TestCase { def testDemo(){ println(" ...

  3. leetcode221 Maximal Square

    思路: dp. 实现: class Solution { public: int maximalSquare(vector<vector<char>>& matrix) ...

  4. Dota2团战实力蔑视人类,解剖5只“AI英雄”

    去年,OpenAI 在 DOTA 的 1v1 比赛中战胜了职业玩家 Dendi,而在距离进阶版 OpenAI Five 系统战胜人类业余玩家不过一个月的时间,今天凌晨,它又以 2:1 的战绩再次完成对 ...

  5. mongodb GUI工具

    人性化,界面工具 网上搜索找的一些 1. 官方网站 tools 2. adminMongo 这个也是我在使用的 3. MongoClient 4. NoSQL Manager for MongoDB ...

  6. Spartan6系列之GTP Transceiver的介绍与使用

    1.       什么是GTP transceiver? GTP transceiver是FPGA里一种线速度达500Mb/sà6.6Gb/s的收发器,利用FPGA内部可编程资源可对其进行灵活地配置, ...

  7. 树莓派安装CentOS

    1.下载并安装,这里使用的是 centos系统地址:http://mirror.centos.org/altarch/7/isos/armhfp/ 下载CentOS-Userland-7-armv7h ...

  8. 隐藏win10任务栏输入法M图标

    在任务栏右键=>任务栏设置=>打开或关闭系统图标=>(关闭)输入指示

  9. HDU_1166_敌兵布阵

    敌兵布阵 Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Submis ...

  10. Flask框架 之abort、自定义错误、视图函数返回值与jsonify

    一.abort函数 使用abort函数可以立即终止视图函数的执行,并可以返回给前端特定的值. abort函数的作用: 1.传递状态码,必须是标准的http状态码 2.传递响应体信息 @app.rout ...