В этой статье мы узнаем, как легко исправить предупреждение «Компоненту не хватает шаблона или функции рендеринга» в Vue.

Вот некоторые возможные причины этого предупреждения:

  1. Отрисовка компонента без шаблона.
  2. Не передавать компонент App методу createApp().
  3. Использование результата app.component() для установки компонента для маршрута Vue Router.

Мы рассмотрим каждый из них в этой статье.

1. Отрисовка компонента без шаблона

Предупреждение «Компонент отсутствует шаблон или функция рендеринга» появляется, когда вы импортируете компонент и добавляете его в разметку, но файл компонента не имеет тега template. Чтобы это исправить, добавьте в файл компонента тег template с дочерним элементом.

App.vue

<template>
  <div id="app">
    <post-list></post-list>
  </div>
</template>
<script>
import PostList from './components/PostList.vue';
export default {
  components: {
    'post-list': PostList,
  },
};
</script>

components/PostList.vue

// ⚠️ empty file

Будет предупреждение, потому что PostList.vue пусто и не имеет тега template.

Вот как мы можем удалить предупреждение:

components/PostList.vue

<template>
  <div></div>
</template>

2. Не передавать компонент приложения в метод createApp().

Чтобы исправить предупреждение «Компонент отсутствует шаблон или функция рендеринга» в Vue, убедитесь, что метод createApp() вызывается с компонентом App в качестве аргумента.

Например, файл, который настраивает ваше приложение Vue, может выглядеть так:

main.js

import { createApp } from 'vue';
import * as VueRouter from 'vue-router';
import Home from './HomePage.vue';
// ⚠️ don't pass {} to createApp()!
const app = createApp({});
const routes = [{ path: '/', component: Home }];
const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
});
app.use(router);
app.mount('#app');

Здесь будет предупреждение, потому что мы передали пустой объект ({}) в createApp() вместо объекта-компонента.

В этом случае мы можем удалить предупреждение, импортировав компонент App и передав его в createApp():

import { createApp } from 'vue';
import * as VueRouter from 'vue-router';
import Home from './HomePage.vue';
// import App component
import App from './App.vue';
// ✅ removed warning
const app = createApp(App);
const routes = [{ path: '/', component: Home }];
const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
});
app.use(router);
app.mount('#app');

3. Использование результата app.component() для установки компонента для маршрута Vue Router.

Вместо того, чтобы импортировать компонент из файла, вы могли создать его с помощью метода component() объекта, возвращаемого createApp().

import { createApp } from 'vue/dist/vue.esm-bundler';
import * as VueRouter from 'vue-router';
import App from './App.vue';
const app = createApp(App);
// app.component() returns the app instance, not a component
// object
const Home = app.component('HomePage', {
  template: '<div>Home</div>',
});
// ⚠️ don't set "component" to the app instance!
const routes = [{ path: '/', component: Home }];
const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
});
app.use(router);
app.mount('#app');

Когда app.component() вызывается с объектом определения (второй аргумент), он возвращает экземпляр приложения, чтобы разрешить цепочку вызовов.

Чтобы исправить предупреждение «Компонент отсутствует шаблон или функция рендеринга» в этом случае, снова вызовите метод app.component(), используя только имя компонента в качестве аргумента, и используйте возвращенный объект компонента для определения маршрута для Vue Router.

import { createApp } from 'vue/dist/vue.esm-bundler';
import * as VueRouter from 'vue-router';
import App from './App.vue';
const app = createApp(App);
// first app.component() call defines component
app.component('HomePage', {
  template: '<div>Home</div>',
});
// ✅ fix: second app.component() call returns component object
const Home = app.component('HomePage');
// ✅ sets "component" to component object
const routes = [{ path: '/', component: Home }];
const router = VueRouter.createRouter({
  history: VueRouter.createWebHashHistory(),
  routes,
});
app.use(router);
app.mount('#app');

Первоначально опубликовано на codingbeautydev.com

Все сумасшедшие вещи, которые делает JavaScript

Увлекательное руководство по тонким предостережениям и менее известным частям JavaScript.

Зарегистрируйтесь и сразу же получите бесплатную копию.