vuejs2 - Vue - 使用 Vue.componet 或 Async 组件更改根组件

Question

我想要一个动态/异步组件，它将根据菜单点击加载。会有很多链接和组件。

我的问题是：

1. 即使我使用 Vue.Component 全局注册也找不到测试组件
2. root中的component1可以更改吗？如果可能，我将使用 Ajax 调用组件文件。

提前致谢。

索引.html

<script src="~/bundle/site.js"></script>
<div id="app">
    <input type="button" v-on:click="changeComponent('test-component')" value="Click me"/>
    <component v-bind:is="view"></component>
</div>

网站.js

import Vue from 'vue';
import axios from 'axios';

global.Vue = Vue;
global.axios = axios;


var vm = new Vue({
    el: '#app',
    data: {
        view: 'component1'
    },
    components: {
        'component1': {
            template: '<div>Dynamic Component master</div>'
        }
    },
    methods: {
        changeComponent: function (parComp) {
            this.component1 = parComp;
        },
    }
});


Vue.component('test-component', {
    template: '<div v-on:click = "changeName()"><h1>{{msg}}</h1></div>',
    data: function () {
        return {
            msg: "Test Componet"
        }
    },
    methods: {
        changeName: function () {
            this.msg = "mouse clicked";
        },
    }
})

更新

1. 将 vm = new Vue().... 更改为 global.vm = new Vue()....
2. 调用 vm.changeComponent('test-component')

现在可以了。

Vue.options.components["test-component"] 可以访问它。
但test-component不能在 html 中访问，例如：

<test-component></test-component>

标签： vuejs2vue-component

Answer 1

通过以下方式解决的问题：

1. 将 vm = new Vue().... 更改为 global.vm = new Vue()....
2. 在 new Vue() 之前声明 Vue.component('test-component'....

谢谢威尔逊