VUE学习7-单文件组件

在Vue cli中,常用vue单文件组件进行开发。即每个组件都是一个后缀为vue的文件。

在一个vue文件中,一般包括三部分:<template></template>模版,<script></script>逻辑,<style></style>样式。其中模版只能又一个,script也只能有一个,但样式可以有多个。

项目目录中,components文件夹存放书写的各种组件。

NavBar,SideBar为编写的组件

component组件编写 -> 引入 -> 注册 ->使用的步骤如下:

  1. components文件夹下新建vue文件,向内填充三要素;
  2. 在App.vue中,import引入components文件夹下的vue组件;
  3. 由于是模块化开发,如果全局注册该组件,则还需引入Vue(import Vue from ‘vue’)
  4. 如果只是局部注册该组件,则在export default中的components对象里注册即可。components: {navbar: navbar}
  5. 在template标签定义的模版中引入自定义的组件。<navbar></navbar>即可。
引入并全局注册navbar组件
在components对象中,局部定义navbar组件

⚠️注意:在每个组件的style部分,使用scoped属性可以让当前编写的样式只影响当前组件。<style lang=”scss” scoped>

使用scoped属性限制组件间的样式覆盖
当组件中<style>标签使用scoped后,会为dom元素自动赋予一个class 保证了所编写样式的作用域