Javascript Vue.js类未实例化

我有一个名为

artifact

的类，它包含一个组件

addartifact

。但是，

addartifact

类中不会调用实例生命周期挂钩（已装载、已创建…），如果打印

此

，它将显示

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>

<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>

添加人工制品
从“Vue属性装饰器”导入{Vue，Prop，Component}；
从“jquery”导入美元；
从“@/views/add/addartifact.vue”导入addartifact；
@组成部分({
组成部分：{
加上人工制品，
},
})
导出默认类Artefact扩展Vue{
私有选择选项卡：编号=0；
私人物品{
选择tab（1）；
}
私人选择选项卡（选项卡：编号）{
this.selectedTab=tab；
}
}

添加人工制品：

<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>

<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>

{{Test}}

测试按钮
从“Vue属性装饰器”导入{Vue，Component，Prop}；
从“jquery”导入美元；
导出默认类AddArtefact扩展Vue{
私有测试：字符串=“”；
私有挂载（）{
this.Test='test123'；
console.log（'test'）；
}
私有testClick（）{
log（'testclick'）；
console.log（this）；
}
}

您忘记添加组件了：

@Component
export default class AddArtefact extends Vue {

您也可以将挂载的文件放在那里：

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