Vue.js如何导入新组件

南北极之间

于 2019-12-20 16:03:59 发布

阅读量604

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端开发

本文链接：https://blog.youkuaiyun.com/qq_22182989/article/details/103633949

前端开发专栏收录该内容

601 篇文章

订阅专栏

本文详细介绍了如何在Vue.js项目中创建一个顶部导航组件，包括组件的编写、样式设置及在主组件中的引入与使用，为开发者提供了一个实用的代码示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.新建组件：

TopNav.vue

<template>
    <div class="hello">
        <div class="nav">
            <a href="http://localhost:9527/static/index.html">首页</a>
            <a href="http://localhost:9527/static/music.html">音乐</a>
            <a href="http://localhost:9527/static/questionBank.html">题库</a>
            <a href="http://localhost:9527/static/imageLibrary.html">图片</a>
            <a href="http://localhost:9527/static/i.html">个人中心</a>
            <a href="http://localhost:9527/static/login.html">登录</a>
        </div>
    </div>
</template>

<script>
export default {
    name: 'TopNav',

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .nav a {
        color: #42b983;
        margin: 0 10px;
    }
</style>

2.编辑主组件App.vue的script标签里面：

1.导入需要的组件：

import TopNav from './components/TopNav.vue'

2.写入组件名称：

  components: {
    TopNav,
  }

3.在App.vue的<template>标签里使用组件：

<TopNav msg="Welcome to Your Vue.js App"/>

完成！