Web前端最全教女朋友学习 vue中的组件(1)，大厂面试必备知识点

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它

Vue.component(tagName, options)

tagName 为组件名，options 为配置选项。注册后，我们可以使用以下方式来调用组件：

代码示例：

测试结果：

全局注册往往是不够理想的。比如，如果你使用一个像 webpack 这样的构建系统，全局注册所有的组件意味着即便你已经不再使用一个组件了，它仍然会被包含在你最终的构建结果中。这造成了用户下载的 JavaScript 的无谓的增加。

有时候由于不需要全局注册每个组件。可以让组件只能用在其它组件内，用实例选项 components 注册。这就有了局部注册组件！

2. 局部注册

局部组件只能在当前注册它的vue实例中使用

代码示例：

Hello! 我是局部注册组件

测试结果：

3. 组件使用注意事项

① 组件名称如果是使用驼峰法命名，使用组件的时候要将大写字母改为小写，并且在前面加上 - ；

② 组件中的tamplate属性必须有一个唯一的根元素，否则会报错；

这个错误的意思是： 组件模板应该只包含一个根元素。应该按如下的方法来写：

三、组件的复用

有时候由于实际需要，有时候需要将组件进行任意次数的复用

代码示例：

<button class=“btn” @click=“toClick”>点击了{{count}}次

测试结果：

1. 遇到的问题

从测试结果可以看出，当点击一个按钮的时候，其它实例的值也会跟着改变。

原因是：data 选项是一个对象，会影响到其它实例。

2. 解决问题

代码示例：

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它