组件用于封装页面的部分功能,将功能的结
构、样式、逻辑代码封装为整体。提高功能的复用性与可维护性,更好的专注
于业务逻辑。组件使用时为自定义 HTML 标签形式,通过
组件名作为自定义标签名。
![](https://i-blog.csdnimg.cn/blog_migrate/fa99ecf879900780e9c4e624ea62cdf0.png)
• 组件注册
• 组件通信
• 组件插槽
• 内置组件
组件注册
• 全局注册
• 组件基础
• 局部注册
全局注册
• 全局注册的组件在注册后可以用于任意实例或组件中。
![](https://i-blog.csdnimg.cn/blog_migrate/2b5f1248a525f931d66227f02e3ee381.png)
• 注意:全局注册必须设置在根 Vue 实例创建之前。
组件基础
• 本质上,组件是可复用的 Vue 实例,所以它们可与 new Vue 接
收相同的选项,例如 data、methods 以及生命周期钩子等。
• 仅有的例外是像 el 这样根实例特有的选项。组件基础
• 需要讲解的内容为:
• 组件命名规则
• template 选项
• data 选项组件命名规则
• 组件具有两种命名规则:
• kebab-case:'my-component’
• PascalCase:'MyComponent
示例如下:
![](https://i-blog.csdnimg.cn/blog_migrate/fac9c8c6b865159f9093b046d01e5e64.png)
• 注意:无论采用哪种命名方式,在 DOM 中都只有 kebab-case 可
以使用
template 选项
• template 选项用于设置组件的结构,最终被引入根实例或其他组
件中。
![](https://i-blog.csdnimg.cn/blog_migrate/5388c8b2d17392b0b81fb332fd519652.png)
• 注意:组件必须只有一个根元素
data 选项
• data 选项用于存储组件的数据,与根实例不同,组件的 data 选
项必须为函数,数据设置在返回值对象中。
![](https://i-blog.csdnimg.cn/blog_migrate/6a4c38a59ec26939d5dd08f107e941e7.png)
data 选项
• 这种实现方式是为了确保每个组件实例可以维护一份被返回对象
的独立的拷贝,不会相互影响
局部注册
• 局部注册的组件只能用在当前实例或组件中。
![](https://i-blog.csdnimg.cn/blog_migrate/0f531fff25710eda8d8ffcdb10446381.png)
单独配置组件的选项对象:
ES6 的对象属性简写: