Vue отображает только последний зарегистрированный компонент - PullRequest
Новая
       0

Vue отображает только последний зарегистрированный компонент

0 голосов
/ 19 сентября 2019

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, отображаемое на странице. Скриншот страницы

Если я удаляю строки, которые регистрируют мои компоненты, я могу использовать библиотеки компонентов, такие как Vuetify, внутри тега div, но не могу, если не сделаю этого.Я ожидал, что смогу использовать мои компоненты и любые другие так, как мне нужно, внутри тега 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 работают нормально, если я не регистрирую какой-либо пользовательский компонент.

Ответы [ 2 ]

0 голосов
/ 19 сентября 2019

в вашем файле 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).

0 голосов
/ 19 сентября 2019

Почему вы используете 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>
...