理解vue中的组件（一）

JasonZhang 发布于2019-08-20 16:09 / 2921人阅读

摘要：组件是中很重要，这部分也是最难理解的，先聊一聊中的组件。语法组件名选项对象来定义一个下拉框组件请选择北京上海杭州组件的名字就为，在模板中使用组件请选择北京上海杭州在模板中使用组件和正常标签一样。

看了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，在模板中使用组件：

在模板中使用组件和正常标签一样。

云服务器 GPU云服务器 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/82756.html

理解vue中的组件（二）

摘要：往往定义组件的构造器后，不需要手动的进行初始化，而是在其他组件的模板中当成标签来使用，这时候需要调用注册成组件。这样设计的目的是防止从子组件意外改变父级组件的状态，从而导致应用的数据流向难以理解。上节说到组件https://segmentfault.com/a/1190000009236700，这一节继续来学习组件：原文博客地址，欢迎学习交流:点击预览从github上获取本文代码：...

Nino 2019-08-23 12:11 评论0 收藏0
Vue.js学习

摘要：一基础学习模式下图不仅概括了模式，还描述了在中是如何和以及进行交互的。关于这一点我们将在后续反应系统中讨论。父组件通过向下传递数据给子组件，子组件通过给父组件发送消息。这个对象必须是普通对象原生对象，及原型属性会被忽略。 Vue.js 是用于构建交互式的 Web 界面的库。Vue.js 提供了 MVVM 数据绑定和一个可组合的组件系统，具有简单、灵活的 API。其实和Jquery一样...

TIGERB 2019-08-21 14:15 评论0 收藏0
vue的生命周期解析并通过表单理解MVVM（不仅理论，图文并茂）

摘要：在前端页面中，把用纯对象表示，负责显示，两者做到了最大限度的分离。的显示与否和的布尔值有关，还是只关注数据的变化。两个组件的布尔值通过两个临近的按钮控制，初始值和的结果都是。组件的声明在组件上，则完全没有进入生命周期。开始前说一说吐槽首先，文章有谬误的地方，请评论，我会进行验证修改。谢谢。 vue真是个好东西，但vue的中文文档还有很大的改进空间，有点大杂烩的意思，对于怎么...

silvertheo 2019-08-22 14:56 评论0 收藏0
深入理解vue中的slot与slot-scope

摘要：具名插槽可以在一个组件中出现次。出现在不同的位置。这个稍微难理解一点。使用非常方便，是基于搭建工程。地址点这里最后如果本文对你理解和有帮助，请不要吝啬手中的点赞哟。作者/云荒杯倾写在前面 vue中关于插槽的文档说明很短，语言又写的很凝练，再加上其和methods，data，computed等常用选项使用频率、使用先后上的差别，这就有可能造成初次接触插槽的开发者容易产生算了吧，回头再...

wayneli 2019-08-22 14:02 评论0 收藏0