[Vue @Component] Switch Between Vue Components with Dynamic Components
Vue with Component Dynamic switch between Components
2023-09-14 08:59:17 时间
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资料:vue一个下拉框值改变,另一个值清空
- [Vue @Component] Pass Props Between Components with Vue Slot Scope & renderless component
- [Vue @Component] Dynamic Vue.js Components with the component element
- [Vue @Component] Control Template Contents with Vue's Render Function
- [Vue @Component] Place Content in Components with Vue Slots
- [Poi] Build a Vue App with Poi
- [Vue + TS] Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript
- [Vue] Dynamic Vue.js Components with the component element
- [Vue @Component] Pass Props Between Components with Vue Slot Scope & renderless component
- [Vue +TS] Use Two-Way Binding in Vue Using @Model Decorator with TypeScript
- [Vue + TS] Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript
- [Vue] Load components when needed with Vue async components
- [Vue] Get up and running with vue-router
- [Vue] Dynamic Vue.js Components with the component element
- 一个典型的Vue应用的App.vue
- vue中mixins和组件的区别和用法
- Springboot+Vue实现将图片和表单一起提交到后端,同时将图片地址保存到数据库、再次将存储的图片展示到前端vue页面
- Vue(二)vue 指令及用法举例
- 【三十天精通 Vue 3】 第十天 Vue 状态管理详解
- 【三十天精通Vue 3】第六天 Vue 3 计算属性和监听器详解