为啥 VueJS 组件在导入/组件调用后不渲染标签？

Posted 2023-02-23

【中文标题】为啥 VueJS 组件在导入/组件调用后不渲染标签？

【英文标题】：Why Does VueJS Component Not Render Tag After Import/Component Calls?为什么 VueJS 组件在导入/组件调用后不渲染标签？

【发布时间】：2021-05-13 03:56:38

【问题描述】：

我有一个项目，其中导入和组件语句可以成功使文件上传器组件正常工作。

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

这是在 MyOwnComponent.vue 文件中。 file-uploader 标记用于模板部分。它在此组件中成功呈现。所以我知道这是正确的做法。

现在我想在 .cshtml 页面上使用 MyOwnComponent.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。

【参考方案1】：

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