注册一个组件到现有的Vue.js实例

Question

我是Vue.js的新手。

我想注册一个本地组件作为在这里描述：

https://vuejs.org/v2/guide/components.html#Local-Registration

唯一的问题是，我需要注册一个组件现有 Vue的情况下没有在创建新实例的东西像：

const app = new Vue({ 
    el: '#app' 
}); 

app.component({ 
    'my-component': { 
     template: '<div>A custom component!</div>' 
    } 
}); 

我已经尝试Vue.extend的，但它不工作。

编辑：

为什么我需要这样的：

我创建一个第三方包，其中将有分量。将要安装该软件包的框架将包含Vue.js和Vue实例。因此，如果我在框架的JS之前包含我的包的JS，那么它会给我Vue是未定义的，如果在框架的JS之后包含我的包的JS，那么它会给我组件错误，因为它必须在Vue实例化之前注册。

Answer 1

您不能将组件添加到类似的实例。所有你能做到将它们添加到Vue的构造像往常一样：

const app = new Vue({ 
    el: '#app' 
}); 

Vue.component({ 
    'my-component': { 
     template: '<div>A custom component!</div>' 
    } 
}); 

在这里看到一个演示：https://jsfiddle.net/Linusborg/kb9pbecq/

Answer 2

const app = new Vue({ 
    el: '#app', 
    components: { 
    'my-component': {template: '<div>Text in component</div>'} 
    } 
}); 

Answer 3

基本上，你不能注册组件到现有的Vue公司的实例，而这是已经呈现。但是你可以在Vue实例挂载到dom元素之前注册一个组件。

// local component 
var child = { 
    template: '<div>A custom component!</div>' 
} 

const app = new Vue({ 
    el: '#app', 
    components: { 
    Child: child 
    } 
}) 

或

// global component 
Vue.component({ 
'child': { 
    template: '<div>A custom component!</div>' 
} }) 

定义部件，然后再执行它。