Vue组件 - 封装使用

1. 什么是组件化开发

一个页面 可能有一个或多个组件 组成完整的页面功能

封装思想: 把页面上 可重用的部分 封装为 组件 , 从而方便项目的开发和维护

2. 封装和使用

第一步 : 定义组件

例如: 定义一个名为MyCom的组件,并在App.vue中使用 (结构如下)

第二步 : 在 App.vue中 引入 、注册 并 使用组件

// 局部注册组件

// 进入到当前组件内部
// 1. 导入组件
import 组件名 from './MyCom.vue'

// 2. 局部注册
export default {
   components: {
     MyCom
   }
}

注意: 组件名不能与现有的html标签名一致

3.使用组件。在当前页面中，当做标签来使用

有3种写法:  

<MyCom/>

<MyCom><MyCom/>

<my-com></my-com>