[英]Vue.js - Component is missing template or render function
In Vue 3, I created the following Home
component, 2 other components ( Foo
and Bar
), and passed it to vue-router
as shown below.在 Vue 3 中,我创建了以下Home
组件、2 个其他组件( Foo
和Bar
),并将其传递给vue-router
,如下所示。 The Home
component is created using Vue's component
function, whereas Foo
and Bar
components are created using plain objects. Home
组件是使用 Vue 的component
函数创建的,而Foo
和Bar
组件是使用普通对象创建的。
The error that I get:我得到的错误:
Component is missing template or render function.
Here, the Home
component is causing the problem.在这里, Home
组件导致了问题。 Can't we pass the result of component()
to a route object for vue-router
?我们不能将component()
的结果传递给vue-router
的路由对象吗?
<div id="app">
<ul>
<li><router-link to="/">Home</router-link></li>
<li><router-link to="/foo">Foo</router-link></li>
<li><router-link to="/bar">Bar</router-link></li>
</ul>
<home></home>
<router-view></router-view>
</div>
<script>
const { createRouter, createWebHistory, createWebHashHistory } = VueRouter
const { createApp } = Vue
const app = createApp({})
var Home = app.component('home', {
template: '<div>home</div>',
})
const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
const router = createRouter({
history: createWebHistory(),
routes: [
{ path: '/', component: Home },
{ path: '/foo', component: Foo },
{ path: '/bar', component: Bar },
],
})
app.use(router)
app.mount('#app')
</script>
See the problem in codesandbox .请参阅codesandbox中的问题。
When app.component(...)
is provided a definition object (the 2nd argument), it returns the application instance (in order to allow chaining calls).当app.component(...)
被提供一个定义对象(第二个参数)时,它返回应用程序实例(为了允许链接调用)。 To get the component definition, omit the definition object and provide only the name:要获取组件定义,请省略定义对象并仅提供名称:
app.component('home', { /* definition */ })
const Home = app.component('home')
const router = createRouter({
routes: [
{ path: '/', component: Home },
//...
]
})
FOR vue-cli vue 3对于 vue-cli vue 3
render function missed in createApp. createApp 中缺少渲染功能。 When setting your app by using createApp function you have to include the render function that include App.使用 createApp 函数设置您的应用程序时,您必须包含包含 App 的渲染函数。
in main.js update to :在 main.js 中更新为:
FIRST change the second line in javascript from:-首先将javascript中的第二行更改为:-
const { createApp } = Vue
to the following lines:到以下几行:
import { createApp,h } from 'vue'
import App from './App.vue'
SECOND第二
Change from :-更改自:-
const app = createApp({})
to:到:
const app = createApp({
render: ()=>h(App)
});
app.mount("#app")
解决方案对我来说很简单,我创建了一个空组件,在填写模板和一个简单的文本 HTML 代码后,它被修复了。
The solution for me was to upgrade node module vue-loader to version 16.8.1.我的解决方案是将节点模块 vue-loader 升级到 16.8.1 版本。
I had this issue too.我也有这个问题。 It's a timing issue.这是一个时间问题。 I added a v-if to create the component when the page is mounted.我添加了一个 v-if 以在安装页面时创建组件。 That fixed it for me.这对我来说是固定的。
<review-info
v-if="initDone"
:review-info="reviewInfo"
/>
// script
onMounted(() => {
initDone = true
})
I was extending a Quasar component in Vue 3, and ran into this problem.我在 Vue 3 中扩展了一个 Quasar 组件,遇到了这个问题。 I solved it by adding the setup: QInput.setup
line last in the component options.我通过在组件选项的最后添加setup: QInput.setup
行来解决它。
<script>
import { defineComponent } from 'vue'
import { QInput } from 'quasar'
const { props } = QInput
export default defineComponent({
props: {
...props,
outlined: {
type: Boolean,
default: true
},
dense: {
type: Boolean,
default: true
},
uppercase: {
type: Boolean,
default: false
}
},
watch: {
modelValue (v) {
this.uppercase && this.$emit('update:modelValue', v.toUpperCase())
}
},
setup: QInput.setup
})
</script>
确保您已在#app
容器中添加了<router-view></router-view>
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.