在其他 vue 组件文件中使用 vue 组件 [英] Use vue component in other vue component file
问题描述
我尝试在其他组件(App.vue)中使用 vue 组件(Global.vue)，但是有
<块引用>无法挂载组件:未定义模板或渲染函数
错误.
Global.vue:
<div class="global-view"><p>全局</p></模板><脚本>导出默认{名称:'全球'}
App.vue:
<div id="应用程序"><全球></全球><路由器视图></路由器视图></模板><脚本>导出默认{名称:'应用'}
main.js:
从'vue'导入Vue从'./App'导入应用程序从'./router'导入路由器Vue.component('global', require('./components/Global'))Vue.config.productionTip = false新的 Vue({el: '#app',路由器，模板:'<App/>',组件:{应用}})您需要在要在其中使用它的组件文件中导入该组件.
`从'./components/Global'导入全局
从那里你需要在你的组件选项中添加一个新的键来注册"组件.
这是您希望应用组件的外观.
<div id="应用程序"><全球></全球><路由器视图></路由器视图></模板><脚本>从 './components/Global 导入全局导出默认{名称:'应用'成分: {'全球':全球，}}
<global></global> 此时应该能够渲染.
I tried to use a vue component(Global.vue) in other component(App.vue), but there
Failed to mount component: template or render function not defined
error.
Global.vue:
<template>
<div class="global-view">
<p>Global </p>
</div>
</template>
<script>
export default {
name: 'global'
}
</script>
App.vue:
<template>
<div id="app">
<global></global>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'app'
}
</script>
main.js:
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.component('global', require('./components/Global'))
Vue.config.productionTip = false
new Vue({
el: '#app',
router,
template: '<App/>',
components: { App }
})
You need to import the component within the component file that you want to use it in.
`import Global from './components/Global'
From there you need to add a new key inside your components option that will "register" the component.
Here is what you want your app component to look like.
<template>
<div id="app">
<global></global>
<router-view></router-view>
</div>
</template>
<script>
import Global from './components/Global
export default {
name: 'app'
components: {
'global': Global,
}
}
</script>
<global></global> should be able to render at this point.
这篇关于在其他 vue 组件文件中使用 vue 组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
