[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>
[Vue @Component] Dynamic Vue.js Components with the component element的更多相关文章
- [Vue] Dynamic Vue.js Components with the component element
You can dynamically switch between components in a template by using the reserved <component> ...
- 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 ...
- 前端框架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 ...
- 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 ...
- [Vue @Component] Extend Vue Components in TypeScript
This lesson shows how you can extend and reuse logic in Vue components using TypeScript inheritance. ...
- [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 ...
- [Vue @Component] Load Vue Async Components
Vue provides a straight-forward syntax for loading components at runtime to help shave off initial b ...
- 使用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 ...
- [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 ...
随机推荐
- EasyUI系列学习(九)-Panel(面板)
一.加载方式 1.class加载 <div class="easyui-panel" title="面板一" style="width:500p ...
- Scala-基础-函数(1)
import junit.framework.TestCase //函数(1) class Demo5 extends TestCase { def testDemo(){ println(" ...
- leetcode221 Maximal Square
思路: dp. 实现: class Solution { public: int maximalSquare(vector<vector<char>>& matrix) ...
- Dota2团战实力蔑视人类,解剖5只“AI英雄”
去年,OpenAI 在 DOTA 的 1v1 比赛中战胜了职业玩家 Dendi,而在距离进阶版 OpenAI Five 系统战胜人类业余玩家不过一个月的时间,今天凌晨,它又以 2:1 的战绩再次完成对 ...
- mongodb GUI工具
人性化,界面工具 网上搜索找的一些 1. 官方网站 tools 2. adminMongo 这个也是我在使用的 3. MongoClient 4. NoSQL Manager for MongoDB ...
- Spartan6系列之GTP Transceiver的介绍与使用
1. 什么是GTP transceiver? GTP transceiver是FPGA里一种线速度达500Mb/sà6.6Gb/s的收发器,利用FPGA内部可编程资源可对其进行灵活地配置, ...
- 树莓派安装CentOS
1.下载并安装,这里使用的是 centos系统地址:http://mirror.centos.org/altarch/7/isos/armhfp/ 下载CentOS-Userland-7-armv7h ...
- 隐藏win10任务栏输入法M图标
在任务栏右键=>任务栏设置=>打开或关闭系统图标=>(关闭)输入指示
- HDU_1166_敌兵布阵
敌兵布阵 Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total Submis ...
- Flask框架 之abort、自定义错误、视图函数返回值与jsonify
一.abort函数 使用abort函数可以立即终止视图函数的执行,并可以返回给前端特定的值. abort函数的作用: 1.传递状态码,必须是标准的http状态码 2.传递响应体信息 @app.rout ...