摘要：组件是中很重要，这部分也是最难理解的，先聊一聊中的组件。语法组件名选项对象来定义一个下拉框组件请选择北京上海杭州组件的名字就为，在模板中使用组件请选择北京上海杭州在模板中使用组件和正常标签一样。
看了Vue的文档，写得很简洁，但是并不简单。在自己学习的过程中踩过不少的坑，学习的时候把官网的例子从头到尾做了一遍，记录在github中https://github.com/WYseven/vue2-basic-demo/tree/master/vue-demo，学习中也有自己的心得体会，记录下来分享，希望对你的理解有所帮助。
组件是vue中很重要，这部分也是最难理解的，先聊一聊vue中的组件。
组件是什么在vue中组件是一个自定义元素，vue的编译器为它添加特殊功能；组件也可以是原生的html元素，使用特殊的is来扩展。
看完之后，比较懵吧？咱们慢慢解开组件的神秘面纱，先从一段布局开始说起。
试想在布局中的一个场景，自定义一个下拉框，需要先定义一个基本的结构：
请选择：
- 北京
- 上海
- 杭州
请选择：
- 博士
- 研究生
- 本科
定义好一个基本结构后，如果要再次使用，复制一份结构改变数据即可。这样复制粘贴的做法没什么毛病，但忽略一个问题---如果要修改下拉框的结构。就会变得难以维护了。
假如我对这个结构不是很满意，我要把p标签改为span标签，使用到下拉框的结构都要改，那可要修改很多地方。如果我要给结构中ul添加一个class，使用给到下拉框的地方都要修改，也要修改很多地方。这样维护起来超级的麻烦。
能不能只写一套结构，然后复用，类似于JavaScript中要复用多行代码，可以封装成一个函数，在使用时只需要调用函数，无需重复写多行代码？答案是当然可以。
在JavaScript中封装的是一个函数，然后调用。那么在html中就不能是函数了，而要定义成标签，但要避开w3c规定的标签，采用自定义标签。
如果有一个自定义标签< custom-select>代表的就是自定义的下拉框，那么在需要使用下拉框的时候，只需要这样来写：
是不是变得精简很多？
对于自定义标签名字，可以参考W3C规定
这样只是一个自定义标签而已，浏览器并不会解析为自定义的下拉框结构。我们真是的目的是要让< custom-select>自定义标签代表一段HTML结构，也就是在浏览器中展示的是自定义下拉框结构。
写上自定义标签：
最终会被解析为以下结构才是我们想要的。
请选择：
- 北京
- 上海
- 杭州
当使用vue时，解析的这个过程就交给Vue来做。
以上举例中自定义标签< custom-select>其实就是一个组件，vue的编译器为它添加特殊功能，最终会呈现我们定义的结构。
我们是从布局结构重复使用引出要使用组件，当然组件还远远不止这些，它还有其他的功能等着去探索。
定义组件在vue中定义组件非常简单，使用Vue构造函数下的component函数，即可定义组件。
语法：
Vue.component(组件名, 选项对象)
来定义一个下拉框组件：
Vue.component("custom-select", {
template: `
请选择：
- 北京
- 上海
- 杭州
`
})
组件的名字就为custom-select，在模板中使用组件：
在模板中使用组件和正常标签一样。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/82756.html
摘要：往往定义组件的构造器后，不需要手动的进行初始化，而是在其他组件的模板中当成标签来使用，这时候需要调用注册成组件。这样设计的目的是防止从子组件意外改变父级组件的状态，从而导致应用的数据流向难以理解。 上节说到组件https://segmentfault.com/a/1190000009236700，这一节继续来学习组件： 原文博客地址，欢迎学习交流:点击预览从github上获取本文代码：...
摘要：在前端页面中，把用纯对象表示，负责显示，两者做到了最大限度的分离。的显示与否和的布尔值有关，还是只关注数据的变化。两个组件的布尔值通过两个临近的按钮控制，初始值和的结果都是。组件的声明在组件上，则完全没有进入生命周期。 开始前说一说 吐槽 首先， 文章有谬误的地方， 请评论， 我会进行验证修改。谢谢。 vue真是个好东西，但vue的中文文档还有很大的改进空间，有点大杂烩的意思，对于怎么...
摘要：在前端页面中，把用纯对象表示，负责显示，两者做到了最大限度的分离。的显示与否和的布尔值有关，还是只关注数据的变化。两个组件的布尔值通过两个临近的按钮控制，初始值和的结果都是。组件的声明在组件上，则完全没有进入生命周期。 开始前说一说 吐槽 首先， 文章有谬误的地方， 请评论， 我会进行验证修改。谢谢。 vue真是个好东西，但vue的中文文档还有很大的改进空间，有点大杂烩的意思，对于怎么...
摘要：具名插槽可以在一个组件中出现次。出现在不同的位置。这个稍微难理解一点。使用非常方便，是基于搭建工程。地址点这里最后如果本文对你理解和有帮助，请不要吝啬手中的点赞哟。 作者/云荒杯倾 写在前面 vue中关于插槽的文档说明很短，语言又写的很凝练，再加上其和methods，data，computed等常用选项使用频率、使用先后上的差别，这就有可能造成初次接触插槽的开发者容易产生算了吧，回头再...
阅读 1198·2021-11-24 09:39
阅读 1701·2021-11-12 10:36
阅读 1649·2021-11-09 09:49
阅读 2414·2021-11-04 16:12
阅读 1020·2021-10-09 09:57
阅读 3120·2019-08-29 17:24
阅读 1783·2019-08-29 15:12
阅读 1164·2019-08-29 14:07
