動的コンポーネントを試してみる

動的 & 非同期コンポーネント — Vue.js

動的コンポーネントはisを使ってコンポーネントを切り替えて使う。

サンプルコード

# Home.vue

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png"><br />
    <button @click="onClickChangeComponent">コンポーネントを切り替える</button>
    <!--HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/-->
    <MyFirstComponent :myProp='propForMyFirstComponent'/>
    <MySecondComponent :myProp='propForMySecondComponent'/>
    <component :is='myComponent' :myProp="trabajo"></component> #コレ
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import MyFirstComponent from '@/components/MyFirstComponent.vue';
import MySecondComponent from '@/components/MySecondComponent.vue';
@Component({
  components: {
    HelloWorld,
    MyFirstComponent,
    MySecondComponent,
  },
})
export default class Home extends Vue {
      private trabajo = '';
      private propForMyFirstComponent = 'Home.vueからMyFirstComponentに渡すためのプロパティ';
      private propForMySecondComponent = 'Home.vueからMySecondComponentに渡すためのプロパティ';
      private myComponent = MyFirstComponent;

      private onClickChangeComponent(): void{
        if (this.myComponent === MyFirstComponent){
          this.trabajo = 'jajajaj';
          this.myComponent = MySecondComponent;
          return
        }
        this.trabajo = 'fafaffa';
        this.myComponent = MyFirstComponent;
      }
}
</script>

template タグに:isの属性値としてコンポーネントを渡す。　コンポーネントにはPropを使ってデータを渡している。

// MyFirstComponent.ts

import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({})
export default class MyFirstComponent extends Vue{
    // @Prop()
    private firstProperty = '最初のプロパティ';
    private secondProperty = '二番目のプロパティ';

    @Prop()
    private myProp: string;

    public mounted() {
        console.warn(this.myProp);
    }
}

# MyFirstComponent.vue

<template>
    <div style='background-color:yellow;'>
        <p>これは一番目のコンポーネントです。</p>
        {{ firstProperty }}<br/>
        {{ myProp }}
    </div>
</template>


<script lang='ts'>
import MyFirstComponent from '@/components/MyFirstComponent';
export default MyFirstComponent
</script>

// MySecondComponent

import { Component, Prop, Vue } from 'vue-property-decorator';

@Component({})
export default class MySecondComponent extends Vue{
    // @Prop()
    private firstProperty = '最初のプロパティ';
    private secondProperty = '二番目のプロパティ';

    @Prop()
    private myProp: string;

    public mounted() {
        console.warn(this.myProp);
    }
}

# MySecondComponent.vue

<template>
    <div style='background-color: orange'>
        <p>これは二番目のコンポーネントです。</p>
        {{ firstProperty }}<br/>
        {{ myProp }}
    </div>
</template>


<script lang='ts'>
import MySecondComponent from '@/components/MySecondComponent';
export default MySecondComponent
</script>