Vue04/Vue组件概念 创建和使用

为什么使用Vue组件？

各自独立 便于复用 可维护性高

一. 组件化开发

组件化开发 指的是： 根据封装的思想 把页面上 可重用的部分 封装为组件 从而方便项目的开发和维护

一个页面 可以拆分成一个个组件 一个组件就是一个整体 每个组件 可以有自己独立的结构 样式 和 行为

前端组件化开发的好处:

• 提高了前端代码的复用性和灵活性
• 提高了开发效率和后期的可维护性

二.组件的注册

App.vue 根组件 这个是一个根组件 

App.vue 根组件内 还可以写入一些小组件 而这些组件 要使用 就需要先注册 

注册组件有两种注册方式 --> 全局注册 局部注册

• 被全局注册的组件 可以在任意的组件模板范围内 使用 通过 Vue.component()

• 被局部注册的组件 只能在当前注册的组件模块范围内使用 通过  components

1. 局部注册 

把独立的组件封装一个 .vue文件中 推荐放到 components 文件 

 通过组件的 components 配置 局部注册组件

import 自定义组件名 from '组件路径地址'


export default {
  // data methods filters computed watch
  components: {
   组件名: 组件
  }
}

2. 全局注册组件

在 components 文件夹中创建一些新的组件

 在 main.js中通过 Vue.component() 全局注册组件

import 自定义组件名 from '组件路径地址'

// 全局注册
 Vue.component(名字, 组件)

使用

<template>
  <div>
    <!-- 组件注册好了，就跟使用html标签一样了 -->
    <组件名></组件名>
  </div>
</template>