為什么 VueJS 組件在導入/組件調用后不渲染標簽？

Question

我有一個項目，其中導入和組件語句可以成功使文件上傳器組件正常工作。

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

這是在 MyOwnComponent.vue 文件中。 file-uploader 標記用於模板部分。 它在此組件中成功呈現。 所以我知道這是正確的做法。

現在我想在 a.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。

Answer 1

找到了我自己的答案。 用代碼示例更新了我的問題。