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组件将以这种方式很好地工作。

#1楼 票数:0 已采纳

为什么使用JavaScript main.js而不是main.ts?

以下是标准的main.ts应用安装功能。 您需要将#app重命名为#app1

import Vue from 'vue';

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

这将挂载主.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>

#2楼 票数:0

在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)。

  ask by Paulo Patez translate from so

未解决问题?本站智能推荐:

1回复

如何使server/srr仅呈现为vue组件?

我正在使用vue-no-ssr ( https://github.com/egoist/vue-no-ssr ),但它创建了仅在客户端呈现的组件。 我想在服务器端呈现我的组件。 有没有办法制作一个只在服务器上渲染的vue组件? 我尝试使用下面的vue-no-ssr的源代码,但我不明白如何熟练使用它。
2回复

如何在vue+ts中正确注册组件?

我有这个代码: 应用程序 调度表.vue ScheduleWeek.vue 并有 vue 警告: 未知的自定义元素:< schedule-week > - 您是否正确注册了组件? 对于递归组件,请确保提供“名称”选项。 如何解决这个问题? 如何正确注册组件?
1回复

基于Vue类的组件警告:属性未在实例上定义,但在呈现期间引用

我正在尝试使用vue-class-component和typescript创建一个vue组件(在这里找到https://github.com/vuejs/vue-class-component )。 根据我的理解,数据是在类中定义的,正如我在下面所做的那样 - 但是我收到了错误: 这是我的
1回复

TypeScript中的无渲染Vue组件

我在JavaScript中有一个无法渲染的组件,试图将其转换为TypeScript。 我在Vue.extend -ed组件中声明render函数时Vue.extend错误: (method) ComponentOptions<Vue, unknown, unknown, unknown,
1回复

Vue使用来自Vue()的模板和脚本定义组件

我正在尝试在我的全局 Vue() init 中定义一个组件,并且已经成功定义了组件的模板,但似乎无法定义为模板执行工作的实际类。 我正在使用带有打字稿的 Vue。
1回复

Vue组件不会进行反应性更新

我有一个简单的组件。 并且它在第一次呈现时就很好,但是当result道具更改时,它什么也没有发生,所有类仍然相同。
1回复

自定义vue组件的模糊事件

我拥有的上面带有过滤器文本输入的自定义 DropDown。 DropDown 可以独立于过滤器文本输入打开。 我想要的是预期的行为是,当过滤器输入失去焦点时以及当我在 DropDown 外部单击鼠标时,下拉列表关闭,以便 DropDown 失去焦点。 我试过的 绑定到控件中我的根 div 元素上的
1回复

Vue类组件属性未在实例上定义

我遇到的问题是,在应用程序从服务器后端获取一些数据后,我的 UI 以某种方式没有更新。 我有以下代码: 我验证了后端实际上服务于正确的餐厅,并在 axios 调用完成后记录了结果。 问题是 DOM 没有更新。 如果我将以下内容添加到 DOM 更新中: 在我看来,如果 vue 识别到已初始化的空数组的