[英]Vue.js Failed to mount component: template or render function not defined
[英]Vue.js - Component is missing template or render function
在 Vue 3 中,我创建了以下Home
组件、2 个其他组件( Foo
和Bar
),并将其传递给vue-router
,如下所示。 Home
组件是使用 Vue 的component
函数创建的,而Foo
和Bar
组件是使用普通对象创建的。
我得到的错误:
Component is missing template or render function.
在这里, Home
组件导致了问题。 我们不能将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>
请参阅codesandbox中的问题。
当app.component(...)
被提供一个定义对象(第二个参数)时,它返回应用程序实例(为了允许链接调用)。 要获取组件定义,请省略定义对象并仅提供名称:
app.component('home', { /* definition */ })
const Home = app.component('home')
const router = createRouter({
routes: [
{ path: '/', component: Home },
//...
]
})
对于 vue-cli vue 3
createApp 中缺少渲染功能。 使用 createApp 函数设置您的应用程序时,您必须包含包含 App 的渲染函数。
在 main.js 中更新为:
首先将javascript中的第二行更改为:-
const { createApp } = Vue
到以下几行:
import { createApp,h } from 'vue'
import App from './App.vue'
第二
更改自:-
const app = createApp({})
到:
const app = createApp({
render: ()=>h(App)
});
app.mount("#app")
解决方案对我来说很简单,我创建了一个空组件,在填写模板和一个简单的文本 HTML 代码后,它被修复了。
我的解决方案是将节点模块 vue-loader 升级到 16.8.1 版本。
我也有这个问题。 这是一个时间问题。 我添加了一个 v-if 以在安装页面时创建组件。 这对我来说是固定的。
<review-info
v-if="initDone"
:review-info="reviewInfo"
/>
// script
onMounted(() => {
initDone = true
})
我在 Vue 3 中扩展了一个 Quasar 组件,遇到了这个问题。 我通过在组件选项的最后添加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.