在vue.js中添加新组件?
我想在我的组件文件中创建一个组件,然后在我的基础应用程序中包含这个组件(如ng include过去的) 我的App.vue如下所示:在vue.js中添加新组件?,vue.js,Vue.js,我想在我的组件文件中创建一个组件,然后在我的基础应用程序中包含这个组件(如ng include过去的) 我的App.vue如下所示: <template> <div id="app"> <div class="container-fluid"> <div class="row> <navigation></navigation> </div>
<template>
<div id="app">
<div class="container-fluid">
<div class="row>
<navigation></navigation>
</div>
<div class="row">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'app',
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
import Vue from 'vue'
import App from './App'
import VueRouter from 'vue-router'
import homepage from './components/homepage'
import navigation from './components/navigation'
Vue.use(VueRouter)
const routes = [
{ path: '/', component: homepage}
]
const router = new VueRouter({
routes,
mode: 'history'
})
new Vue({
el: '#app',
template: '<App/>',
components: {
App, navigation
},
router
}).$mount('#app')
要在新的Vue实例中使用该组件,或者使用(如您所说)Vue.component,或者您应该导入并注册该组件。
看,你可以
在App.VUE中尝试:
<template>
<div id="app">
<div class="container-fluid">
<div class="row>
<navigation></navigation>
</div>
<div class="row">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
import navigation from './components/navigation.vue'
export default {
name: 'app',
components:{
navigation
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
您是否尝试导入主页并放入组件:{App,homepage}?我在组件文件中创建了一个navigation.vue组件。然后我将它添加到{App,navigation}中,就像main.js文件中那样。我还在main.js文件的顶部添加了一个“从./components/navigation导入导航”。我的回答是:[Vue warn]:未知自定义元素:-您是否正确注册了该组件?是否可以使用新代码更新您的问题?我可以这样做:Vue.component('nav-test',{template:'test'),它可以工作。但是我需要以某种方式将外部组件代码拉到模板中。我编辑了主要问题,请看一看,谢谢。谢谢。我仍然得到未捕获的引用错误:导航未定义您是否正确导入了导航组件?有正确的路径吗?(从'path_component.vue'导入导航)现在问题是找不到导航组件。我的确切代码:从'/components/navigation.vue'导入导航导出默认值{name:'app',组件:{navigation}}}否。问题是删除main.js中对导航组件的引用,这就是为什么找不到它,因为我已将导入移到app.vue
<template>
<div id="app">
<div class="container-fluid">
<div class="row>
<navigation></navigation>
</div>
<div class="row">
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
import navigation from './components/navigation.vue'
export default {
name: 'app',
components:{
navigation
}
}
</script>
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
<template src="template.html"></template>
<script>
export default {
data(){
return {}
}
}
</script>