Vue.js class 未實例化

Question

我有一個名為Artefact的 class ，其中包含一個組件AddArtefact 。 但是在AddArtefact class 中沒有調用 Instance Lifecycle Hooks (mounted, created...)，如果你打印this ，它會顯示null 。 但這是為什么呢？

人工制品：

<template>
    <div>
        <button v-show="selectedTab === 0" @click="AddArtefact">Add Artefact</button>
        <AddArtefact v-show="selectedTab === 1"></AddArtefact>
    </div>
</template>

<script lang="ts">
import {Vue, Prop, Component} from 'vue-property-decorator';
import $ from 'jquery';
import AddArtefact from '@/views/add/AddArtefact.vue';

@Component({
    components: {
        AddArtefact,
    },
})

export default class Artefact extends Vue {
    private selectedTab: number = 0;

    private AddArtefact() {
        this.selectTab(1);
    }

    private selectTab(tab: number) {
        this.selectedTab = tab;
    }
}
</script>

添加Artefact ：

<template>
    <div>
        <p>{{Test}}</p>
        <button @click="testClick">Test Button</button>
    </div>
</template>

<script lang="ts">
import {Vue, Component, Prop} from 'vue-property-decorator';
import $ from 'jquery';

export default class AddArtefact extends Vue {
    private Test: string = '';

    private mounted() { 
        this.Test = 'Test 123';
        console.log('test');
    }

    private testClick() {
        console.log('Test Click');
        console.log(this); 
    }
}
</script>

Answer 1

您忘記添加@Component ：

@Component
export default class AddArtefact extends Vue {

你也可以把掛載的東西放在那里：

@Component({
   mounted(this: AddArtefact) {
     ...
   }
}) 
export default class AddArtefact extends Vue {