如何修复 Vue 中的“组件缺少模板或渲染功能”警告

如何修复 Vue 中的“组件缺少模板或渲染功能”警告

在本文中，我们将学习如何轻松修复 Vue 中的“组件缺少模板或渲染函数”警告。

以下是此警告的一些可能原因：

1. 渲染没有模板的组件。
2. 不通过 应用程序 组成部分 创建应用程序（） 方法。
3. 使用结果 app.component() 为 Vue Router 路由设置组件。

我们将在本文中逐一介绍它们。

1. 渲染一个没有模板的组件

导入组件并将其添加到标记时出现“组件缺少模板或渲染功能”警告，但该组件的文件没有 模板 标签。要修复它，请添加一个 模板 将带有子元素的标签添加到组件文件中。

应用程序.vue

 <template>  
 <div id="app">  
 <post-list></post-list>  
 </div>  
 </template> <script>  
 从 './components/PostList.vue' 导入 PostList； 导出默认 {  
 成分： {  
 'post-list': PostList,  
 },  
 };  
 </script>

组件/PostList.vue

 // ⚠️ 空文件

会有一个警告，因为 PostList.vue 是空的并且没有 模板 标签。

以下是我们可以删除警告的方法：

组件/PostList.vue

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

2.没有将App组件传递给createApp()方法

要修复 Vue 中的“组件缺少模板或渲染函数”警告，请确保 创建应用程序（） 方法被调用 应用程序 组件作为参数。

例如，设置 Vue 应用程序的文件可能如下所示：

main.js

 从'vue'导入{createApp}；  
 从'vue-router'导入*作为VueRouter；  
 从'./HomePage.vue'导入主页； // ⚠️ 不要将 {} 传递给 createApp()！  
 const app = createApp({}); const routes = [{ path: '/', component: Home }]; 常量路由器 = VueRouter.createRouter({  
 历史：VueRouter.createWebHashHistory()，  
 路线，  
 }); app.use(路由器); app.mount('#app');

这里会有一个警告，因为我们传递了一个空对象 ( {} ） 至 创建应用程序（） 而不是组件对象。

在这种情况下，我们可以通过导入 应用程序 组件并将其传递给 创建应用程序（） ：

 从'vue'导入{createApp}；  
 从'vue-router'导入*作为VueRouter；  
 从'./HomePage.vue'导入主页； // 导入应用组件  
 从'./App.vue'导入应用程序； // ✅ 删除警告  
 const app = createApp(App); const routes = [{ path: '/', component: Home }]; 常量路由器 = VueRouter.createRouter({  
 历史：VueRouter.createWebHashHistory()，  
 路线，  
 }); app.use(路由器); app.mount('#app');

3. 使用 app.component() 的结果为 Vue Router 路由设置组件

除了从文件中导入组件，您可能选择使用 零件（） 返回的对象的方法 创建应用程序（） .

 从 'vue/dist/vue.esm-bundler' 导入 { createApp }；  
 从'vue-router'导入*作为VueRouter；  
 从'./App.vue'导入应用程序； const app = createApp(App); // app.component() 返回应用实例，而不是组件  
 // 目的  
 const Home = app.component('HomePage', {  
 模板： '<div>家</div>',  
 }); // ⚠️ 不要将“组件”设置为应用实例！  
 const routes = [{ path: '/', component: Home }]; 常量路由器 = VueRouter.createRouter({  
 历史：VueRouter.createWebHashHistory()，  
 路线，  
 }); app.use(路由器); app.mount('#app');

什么时候 app.component() 使用定义对象（第二个参数）调用，它返回应用程序实例以允许链接调用。

要修复这种情况下的“组件缺少模板或渲染函数”警告，请调用 app.component() 再次使用组件名称作为参数的方法，并使用返回的组件对象为 Vue Router 定义路由。

 从 'vue/dist/vue.esm-bundler' 导入 { createApp }；  
 从'vue-router'导入*作为VueRouter；  
 从'./App.vue'导入应用程序； const app = createApp(App); // 第一个 app.component() 调用定义了组件  
 app.component('主页', {  
 模板： '<div>家</div>',  
 }); // ✅ 修复：第二个 app.component() 调用返回组件对象  
 const Home = app.component('HomePage'); // ✅ 将“组件”设置为组件对象  
 const routes = [{ path: '/', component: Home }]; 常量路由器 = VueRouter.createRouter({  
 历史：VueRouter.createWebHashHistory()，  
 路线，  
 }); app.use(路由器); app.mount('#app');

最初发表于 编码beautydev.com

JavaScript 所做的每一件疯狂的事

关于 JavaScript 的细微警告和鲜为人知的部分的迷人指南。

注册 并立即获得免费副本。

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明

本文链接：https://www.qanswer.top/23074/31330913