Vue 只渲染最后注册的组件

Question

Vue 总是渲染最后注册的组件，并且只渲染它。 即使我根本不使用它。

//main.ts
import Vue from 'vue';
Vue.component('component-one', require('./components/ComponentOne.vue'));
Vue.component('component-two', require('./components/ComponentTwo.vue'));

const app = new Vue({
    el: '#app1',
    vuetify,
})

//ComponentOne
<template>
  <h2>Component One</h2>
</template>
<script lang="ts">
import Vue from 'vue'
export default class ComponentOne extends Vue{ 
}
</script>

//ComponentTwo
<template>
  <h2>Component Two</h2>
</template>
<script lang="ts">
import Vue from 'vue';
  export default class ComponentTwo extends Vue{
  }
</script>

<body>
   <div id="app1">
      <!-- Whatever I put in here, it won't matter -->
      <!-- I will always get only the content of the last registered component -->
      <h2>Title</h2>
      <component-one></component-one>
      <component-two></component-two>
   </div>
   <script src="/js/app.js"></script>
</body>

我得到的是页面上呈现的 ComponentTwo 的内容。 页面截图

如果我删除注册我的组件的行，我可以在 div 标签内使用像 Vuetify 这样的组件库，但如果我不这样做就不行。 我希望能够在 div 标签中以任何我想要的方式使用我的组件和任何其他组件。

编辑：谢谢你们的答案。 有没有办法像在模板中一样在 HTML 元素中使用这些组件？ 像这样：

<!-- This could be a index.html or, in my case, a Laravel Blade view
<body>
   <div id="app1">
      <component-one></component-one>
      <component-two></component-two>
   </div>
   <script src="/js/app.js"></script>
</body>

如果我不注册任何自定义组件，Vuetify 组件可以正常工作。

Answer 1

为什么使用 javascript main.js 而不是 main.ts？

下面是一个标准的 main.ts 应用程序安装 function。 您将#app重命名为#app1

import Vue from 'vue';

new Vue({
    render: (h) => h(App)
}).$mount('#app');

这会挂载 main.vue 实例，此时将允许渲染您喜欢的任何组件。 下面是一个小示例，使用您的一些代码和帮助程序vue-property-decorator ，这不是必需的，但在使用 Typescript 和 Vue 时您可能会发现非常有用

<template>
  <div>
   <body>
    <div id="app1">
      <h2>Title</h2>
      <component-one></component-one>
      <component-two></component-two>
     </div>
    </body>
  </div>
</template>


<script lang="ts">
    @Component({
        components: {
            // This is the way to lazy load components, you could also just import them normally above the @component decorator
            'component-one': () => import('@/components/ComponentOne.vue').then(m => m.default),
            'component-two': () => import('@/components/ComponentTwo.vue').then(m => m.default),
        }
    })
    export default class App extends Vue {}
</script>

Answer 2

在您的 main.js 文件中，您需要指定要呈现的第一个组件，如下所示：

import Vue from 'vue'
import App from './App.vue'

new Vue({
  el: '#app',
  render: h => h(App),
})

然后，在第一个组件中（在我的示例 App.vue 中），您可以导入其他组件（如 ComponentOnde.vue 和 ComponentTwo.vue）。