Vue组件 - 封装使用

81 阅读 0 评论 54 点赞

我是靠谱客的博主高挑小海豚，最近开发中收集的这篇文章主要介绍Vue组件 - 封装使用，觉得挺不错的，现在分享给大家，希望可以做个参考。

1. 什么是组件化开发

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

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

第一步 : 定义组件

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

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

// 局部注册组件

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

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

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

有3种写法:

<my-com></my-com>

以上就是高挑小海豚为你收集整理的Vue组件 - 封装使用的全部内容，希望文章能够帮你解决Vue组件 - 封装使用所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。