为什么VueJS组件在导入/组件调用后不呈现标签?

Question

我有一个项目，其中导入&组件语句work成功地使文件上传器组件工作。

import fileUploader from '../common/FileUploader.vue';
Vue.component('file-uploader', fileUploader);

这是在MyOwnComponent中。vue文件。文件上传器标签用于模板部分。它在该组件中成功呈现。所以我知道这是正确的做法。

现在我想使用MyOwnComponent。.cshtml页面上的Vue文件

我目前必须使它成功工作的脚本是:

import cmpMyOwnComponent from '../vue/cmpMyOwnComponent.vue';
window.MyOwnComponent = (function(){
let vueApp = Vue.extend(cmpMyOwnComponent);
return new vueApp().$mount('#my-own-component');
})();

您可能认为我也可以通过更改扩展/挂载调用来使其工作:

Vue.component('my-own-component', myOwnComponent);

然后在。cshtml页面上使用标签:

<my-own-component></my-own-component>

在我自己的vue组件中，name属性也被设置为'my-own-component'。

但是没有渲染。在我的控制台也没有错误反馈。

我怎么做才能让它工作?

(更新1)

我只是解决了这个问题，通过包装我的标签在div#div-my-own-component，然后调用:

new Vue({ el: '#div-my-own-component' });

所以问题是，当我注册我的组件时，我并没有创建一个vue应用程序。

我认为这会使我的代码更小，但它只会使我不得不在我的vue应用程序中包装一个额外的div，这实际上使我的代码更大。

我坚持用我以前做的方法。

(更新2)

好的，事实证明你也可以直接在标签上创建一个vue应用:

new Vue({ el: 'my-own-component' });

不需要容器div

Answer 1

找到了自己的答案。用代码示例更新了我的问题。