[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

最新文章

热门文章