在其他 vue 组件文件中使用 vue 组件

本文介绍了在其他 vue 组件文件中使用 vue 组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我尝试在其他组件(App.vue)中使用 vue 组件(Global.vue)，但是有

无法挂载组件:未定义模板或渲染函数

错误.

Global.vue:

<div class="global-view"><p>全局</p>

</模板><脚本>导出默认{名称:'全球'}

App.vue:

<div id="应用程序"><全球></全球><路由器视图></路由器视图>

</模板><脚本>导出默认{名称:'应用'}

ma​​in.js:

从'vue'导入Vue从'./App'导入应用程序从'./router'导入路由器Vueponent('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' Vueponent('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.