[Vue @Component] Switch Between Vue Components with Dynamic Components
A common scenario is to present different components based on the state of the application. Dynamic components in Vue make this simple by providing a component
element that simply needs to be bound to the component that you want to render. This example shows using a select dropdown in Vue to select the component to render.
<template>
<Settings>
<Layout slot-scope="{header, footer}">
<AwesomeHeader slot="header" :header="header"></AwesomeHeader>
<div slot="content" class="flex-grow">
<select v-model="selectedComp">
<option v-for="comp in comps" :key="comp.name" :value="comp">{{comp.name}}</option>
</select>
<component :is="selectedComp"></component>
</div>
<AwesomeFooter slot="footer" :footer="footer"></AwesomeFooter>
</Layout>
</Settings>
</template> <script>
import Vue from "vue"
import { Component, Prop } from "vue-property-decorator"
import Settings from "./Settings"
import Layout from "./Layout"
import { Header, Footer } from "./components" 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: {
Settings,
Layout,
AwesomeHeader: Header,
AwesomeFooter: Footer
}
})
export default class App extends Vue {
comps = [One, Two, Three]
selectedComp = this.comps[0]
}
</script>
[Vue @Component] Switch Between Vue Components with Dynamic Components的更多相关文章
- 前端框架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.mixin Vue.extend(Vue.component)的原理与区别
1.本文将讲述 方法 Vue.extend Vue.mixin 与 new Vue({mixins:[], extend:{}})的区别与原理 先回顾一下 Vue.mixin 官网如下描述: Vue. ...
- vue component :is
vue component :is Vue <component> element https://vuejs.org/v2/guide/components.html#Dynamic-C ...
- vue 快速入门 系列 —— vue 的基础应用(上)
其他章节请看: vue 快速入门 系列 vue 的基础应用(上) Tip: vue 的基础应用分上下两篇,上篇是基础,下篇是应用. 在初步认识 vue一文中,我们已经写了一个 vue 的 hello- ...
- [Vue @Component] Dynamic Vue.js Components with the component element
You can dynamically switch between components in a template by using the reserved <component> ...
- vue & dynamic components
vue & dynamic components https://vuejs.org/v2/guide/components-dynamic-async.html keep-alive htt ...
- [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报错之" [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 ...
随机推荐
- servlet下的request&&response
request的方法 *获取请求方式: request.getMethod(); * 获取ip地址的方法 request.getRemoteAddr(); * 获得用户清气的路 ...
- P1400 塔
题目描述 有N(2<=N<=600000)块砖,要搭一个N层的塔,要求:如果砖A在砖B上面,那么A不能比B的长度+D要长.问有几种方法,输出 答案 mod 1000000009的值. 输入 ...
- Codewars练习Python
计算一个数组的中间数,数的两边和相等,并返回index值 如:数组[1,2,3,4,6] 返回3(数组序号从0开始) def find_even_index(arr): ""&qu ...
- Selenium学习第二天,了解Selenium工作模式与学习Selenium需要具备的知识与工具。
Selenium学习网站: 1.http://www.ltesting.net/ceshi/open/kygncsgj/selenium/2014/0408/207237.html——好像是对API的 ...
- 【转载】testlink 1.8.5 安装错误的解决方法
TestLink所需环境为PHP+MYSQL (支持MS SQL等),系统推荐使用PHP5.2,安装成功以后,如果运行时出错,主要两种错: [1].HP Warning: strtotime(): I ...
- 测试端口是否开放用PIN还是telnet命令
有时候很想知道一个IP的某个端口是否开放,那么你会用什么命令来测试呢?是ping还是telnet? 其实正确的方法应该是telnet命令.因为用ping命令的话不管你ping哪个端口,只要这个IP地址 ...
- 【PostgreSQL-9.6.3】使用pg_settings表查看参数的生效条件
PostgreSQL数据库的配置参数都在postgresql.conf文件中,此文件的目录为数据库的数据目录($PGDATA).这些参数有些是直接修改就可以生效,有些需要重启数据库才能生效,而有些根本 ...
- IE/firefox/chrome 每次都刷新
IE FIREFOX 1.在firefox的地址栏上输入about:config回车2.找到browser.cache.check_doc_frequency选项,双击将3改成1保存即可. 那么这个选 ...
- Bootstrap Datatable 简单的基本配置
$(document).ready(function() { $('#example').dataTable({ "sScrollX": "100%", ...
- 洛谷——P3871 [TJOI2010]中位数
P3871 [TJOI2010]中位数 一眼秒掉,这不是splay水题吗,套模板 #include<bits/stdc++.h> #define IL inline #define N 1 ...