使用VUE组件

我试图用其它成分（App.vue）一VUE成分（Global.vue），但使用VUE组件

无法装载组件：模板或呈现功能不定义为

错误。

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 } 
})

来源

2017-09-23 ramazan793

看到这个https://github.com/sagalbot/vue-select/issues/127 - 也许是要求声明会产生问题，Johnathan建议使用import来代替。 –

@RichardMatsen是啊，进口作品 – ramazan793

你需要即时通讯端口要在使用它的组件文件中的组成部分。从“./components/Global”

从那里

`进口全球您需要添加一个新的密钥您的组件选项，将里面的“注册“组件。

这就是你希望你的应用程序组件看起来像。

<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>应该能够在这一点上呈现。

来源

2017-09-23 22:19:46

OP已经在全球范围内使用Vue.component展示组件。 – Bert

@Bert：OP仍然需要通过将'new Vue'实例添加到'components'对象来注册该组件。 –

不，他没有，当它在全球范围内注册时。 – Bert

我用来代替需要（在main.js）进口和它的作品对我来说：

import Global from './components/Global.vue 
Vue.component('global', Global)`

来源

2017-09-24 07:39:37 ramazan793

使用VUE组件

回答

相关问题