vue3---组件基础(上)保姆级篇(vue组件用法)

推荐整理分享vue3---组件基础(上)保姆级篇(vue组件用法)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:vue组件教程,vue组件详解,vue3 组件,vue组件用法,vue组件实现原理,vue3组件写法,vue3 组件,vue3组件写法,内容如对您有帮助，希望把文章链接给更多的朋友！

关于 vue3 基础学习，前面两篇博客讲了单页面应用程序、vite 的基本使用 。

这期就来一篇多一点的吧！这期主要内容有：组件化开发思想、vue 组件的构成、组件的基本使用、封装组件的案例。

看完这些，砸门也就详细了解什么是组件了。废话不多说，直接上刺刀！！

目录

前言

组件化开发思想

1. 什么是组件化开发

2. 组件化开发的好处

3. vue 中的组件化开发

vue 组件的构成

1. vue 组件组成结构

2. 组件的 template 节点

2.1 在 template 中使用指令

2.2 在 template 中定义根节点

3. 组件的 script 节点

3.1 script 中的 name 节点

3.2 script 中的 data 节点

3.3 script 中的 methods 节点

4. 组件的 style 节点

4.1 让 style 中支持 less 语法

组件的基本使用

1. 组件的注册

1.1 注册组件的两种方式

1.2 全局注册组件

1.3 使用全局注册组件

1.4 局部注册组件

1.5 全局注册和局部注册的区别

1.6 组件注册时名称的大小写

1.7 通过 name 属性注册组件

2. 组件之间的样式冲突问题

2.1 思考：如何解决组件样式冲突的问题

2.2 style 节点的 scoped 属性

2.3 /deep/ 样式穿透

3. 组件的 props

3.1 什么是组件的 props

3.2 在组件中