В этой статье мы узнаем, как легко исправить предупреждение «Компоненту не хватает шаблона или функции рендеринга» в Vue.
Вот некоторые возможные причины этого предупреждения:
- Отрисовка компонента без шаблона.
- Не передавать компонент
App
методуcreateApp()
. - Использование результата
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.
Зарегистрируйтесь и сразу же получите бесплатную копию.