将组件注册到现有的Vue.js实例
将组件注册到现有的Vue.js实例
提问于 2017-08-03 10:38:24
我是Vue.js的新手。
我想注册一个本地组件，如下所述：
https://v2.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实例化之前注册。
回答 4
Stack Overflow用户
发布于 2018-10-17 05:11:46
应该在新实例构造之前声明全局组件。
Vue.component('my-component-a', {
template: '<div>A custom component A!</div>'
});
Vue.component('my-component-b', {
template: '<div>A custom component B!</div>'
});
const app1 = new Vue({
el: '#app1',
template: '<div><my-component-a /><my-component-b /><my-component-c /></div>',
components: {
MyComponentC: {
template: '<div>A custom component C!</div>'
}
}
});
const app2 = new Vue({
el: '#app2',
template: '<div><my-component-b /><my-component-a /><my-component-c /></div>'
});<script src="https://cdn.jsdelivr.net/npm/vue@2.5.17/dist/vue.js"></script>
<div id="app1"></div>
<div id="app2"></div>
您无法从您的app2中访问C组件
Stack Overflow用户
发布于 2017-08-03 11:09:10
您不能向这样的实例中添加组件。您所能做的就是像往常一样将它们添加到Vue构造函数中：
Vue.component('my-component', {
template: '<div>A custom component!</div>'
});
const app = new Vue({
el: '#app'
});Stack Overflow用户
发布于 2017-08-03 11:20:34
const app = new Vue({
el: '#app',
components: {
'my-component': {template: '<div>Text in component</div>'}
}
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/45481822
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号