资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/Vue 组件（上篇）

Vue 组件（上篇）

Corwien / 883人阅读

摘要：必须是函数技术上的确是一个函数了，因此不会警告，但是我们返回给每个组件的实例的却引用了同一个对象由于这三个组件共享了同一个，因此增加一个会影响所有组件这不对。父组件通过向下传递数据给子组件，子组件通过给父组件发送消息。

什么是组件

组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以是原生 HTML 元素的形式，以 is 特性扩展。

使用组件 注册

注册一个全局组件，你可以使用 Vue.component(tagName, options)

运行结果：



A custom component!
局部注册

不必在全局注册每个组件。通过使用组件实例选项注册，可以使组件仅在另一个实例/组件的作用域中可用：

运行结果：



A child component!

如果把 child-component 只能用example-2中，不能放到其他的div中，如果把放到其他的div中就会报错。

DOM 模板解析说明

当使用 DOM 作为模版时 (例如，将 el 选项挂载到一个已存在的元素上), 你会受到 HTML 的一些限制，因为 Vue 只有在浏览器解析和标准化 HTML 后才能获取模版内容。尤其像这些元素

    ，
      ，，
      ...

      自定义组件 被认为是无效的内容，因此在渲染的时候会导致错误。变通的方案是使用特殊的 is 属性：

      应当注意，如果您使用来自以下来源之一的字符串模板，这些限制将不适用：

      由于这三个组件共享了同一个 data，因此增加一个 counter 会影响所有组件！这不对。我们可以通过为每个组件返回全新的 data 对象来解决这个问题：

      data: function () {
    //return data
    return {
        counter: 0
    }
}

      现在每个 counter 都有它自己内部的状态了。

      构成组件

      在 Vue 中，父子组件的关系可以总结为 props down, events up。父组件通过 props 向下传递数据给子组件，子组件通过 events 给父组件发送消息。看看它们是怎么工作的。

      Prop 使用prop传递数据

      要让子组件使用父组件的数据，我们需要通过子组件的 props 选项。

      运行结果：

      
hello world!
      camelCase vs. kebab-case

      HTML 特性是不区分大小写的。所以，当使用的不是字符串模版，camelCased (驼峰式) 命名的 prop 需要转换为相对应的 kebab-case (短横线隔开式) 命名：

      运行结果：

      
hello world message!

      如果把child2中的 my-message 改为 myMessage，

      错误提示：

      动态 Prop

      在模板中，要动态地绑定父组件的数据到子模板的 props，与绑定到任何普通的HTML特性相类似，就是用 v-bind。每当父组件的数据变化时，该变化也会传导给子组件

      运行结果：

      字面量语法 vs 动态语法

      因为它是一个字面 prop，它的值是字符串 "1" 而不是 number。如果想传递一个实际的 number，需要使用 v-bind，从而让它的值被当作 JavaScript 表达式计算：
      单向数据流

      prop 是单向绑定的：当父组件的属性变化时，将传导给子组件，但是不会反过来。这是为了防止子组件无意修改了父组件的状态——这会让应用的数据流难以理解。

      Prop 验证

      我们可以为组件的 props 指定验证规格。如果传入的数据不符合规格，Vue 会发出警告。当组件给其他人使用时，这很有用。
      要指定验证规格，需要用对象的形式，而不能用字符串数组：

      错误提示：

      propA 类型是number，而我们传递给它的是个字符串，需要如下修改

      

// :prop-a 是 v-bind:prop-a的缩写

      如果把prop-c去掉，格式如下

      错误提示：

      这是由于propC required: true 是必传的。

      type 可以是下面原生构造器：

      String

      Number

      Boolean

      Function

      Object

      Array

      Symbol

      type 也可以是一个自定义构造器函数，使用 instanceof 检测。
      当 prop 验证失败，Vue 会在抛出警告 (如果使用的是开发版本)。注意 props 会在组件实例创建之前进行校验，所以在 default 或 validator 函数里，诸如 data、computed 或 methods 等实例属性还无法使用。

      非 Prop 属性

      所谓非 prop 属性，就是它可以直接传入组件，而不需要定义相应的 prop。
      明确给组件定义 prop 是传参的推荐方式，但组件的作者并不总能预见到组件被使用的场景。所以，组件可以接收任意传入的属性，这些属性都会被添加到组件的根元素上。
      例如，第三方组件 bs-date-input，当它要和一个 Bootstrap 插件互操作时，需要在这个第三方组件的 input 上添加 data-3d-date-picker 属性，这时可以把属性直接添加到组件上 (不需要事先定义 prop)：

      添加属性 data-3d-date-picker="true" 之后，它会被自动添加到 bs-date-input 的根元素上

      替换/覆盖现有的特性

      运行结果：

      对于多数特性来说，传递给组件的值会覆盖组件本身设定的值。即例如传递 type="large" 将会覆盖 type="date" 且有可能破坏该组件！索性我们对待 class 和 style 特性会更聪明一些，这两个特性的值都会做合并 (merge) 操作，让最终生成的值为：form-control date-picker-theme-dark。

      源码： 源码下载

      Vue组建（下篇）

      社群品牌：从零到壹全栈部落
      定位：寻找共好，共同学习，持续输出全栈技术社群
      业界荣誉：IT界的逻辑思维
      文化：输出是最好的学习方式
      官方公众号：全栈部落
      社群发起人：春哥(从零到壹创始人，交流微信：liyc1215)
      技术交流社区：全栈部落BBS
      全栈部落完整系列教程：全栈部落完整电子书学习笔记
      关注全栈部落官方公众号，每晚十点接收系列原创技术推送
idc机房托管 专线服务 vue组件 vue组件开发 vue父子组件通讯 vue轮播组件

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

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

相关文章

  • vue@2.0源码学习---组件究竟是什么

    摘要：定义一个组件如下打印如下再回过头看，可以发现他做的工作就是扩展一个构造函数，并将这个构造函数添加到现在我们已经可以回答最开始的问题的组件是什么的组件其实就是扩展的构造函数，并且在适当的时候实例化为实例。 vue@2.0源码学习---组件究竟是什么 本篇文章从最简单的情况入手，不考虑prop和组件间通信。 Vue.component vue文档告诉我们可以使用Vue.component(...

    PiscesYE 评论0 收藏0

  • 编写chameleon跨端组件的正确姿势(上篇)

    摘要：使用语法统一实现跨端组件请关注文章编写跨端组件的正确姿势下篇依靠强大的多态协议，项目中可以轻松使用各端的第三方组件封装自己的跨端组件库。这种做法同时解决了组件命名冲突问题，例如在微信小程序端引用表示调用小程序原生的组件而不是内置的组件。 在chameleon项目中我们实现一个跨端组件一般有两种思路：使用第三方组件封装与基于chameleon语法统一实现。本篇是编写chameleon跨端...

    h9911 评论0 收藏0

  • JS框架 - 收藏集 - 掘金

    摘要：现在回过头总结，才又进一步的揭开了闭包的一层后台管理系统解决方案前端掘金基于系列的后台管理系统解决方案。什么是继承大多数人使用继承不外乎是为了获得基于的单页应用项目模板前端掘金小贴士本项目已升级至。 关于js、jq零碎知识点 - 掘金写在前面： 本文都是我目前学到的一些比较零碎的知识点，也是相对偏一点的知识，这是第二篇。前后可能没有太大的相关性，需要的朋友可以过来参考下，喜欢的可以点个...

    wenyiweb 评论0 收藏0

  • 在没有DOM操作的日子里，我是怎么熬过来的（中）

    摘要：于是，闰土顺应呼声，在这个凛冽的寒冬早晨，将中篇热文滚烫呈上。本系列文章还没有结束，下篇，也可能是终结篇，即将来袭作者闰土少年链接来源掘金著作权归作者所有。 showImg(https://segmentfault.com/img/bVZsm6?w=669&h=445); 前言 继上篇推送之后，在掘金、segmentfault、简书、博客园等平台上迅速收到了不俗的反馈，大部分网友都留言...

    RiverLi 评论0 收藏0

  • 在没有DOM操作的日子里，我是怎么熬过来的（中）

    摘要：于是，闰土顺应呼声，在这个凛冽的寒冬早晨，将中篇热文滚烫呈上。本系列文章还没有结束，下篇，也可能是终结篇，即将来袭作者闰土少年链接来源掘金著作权归作者所有。 showImg(https://segmentfault.com/img/bVZsm6?w=669&h=445); 前言 继上篇推送之后，在掘金、segmentfault、简书、博客园等平台上迅速收到了不俗的反馈，大部分网友都留言...

    CoXie 评论0 收藏0

发表评论

登陆后可评论

0条评论

Corwien

男|高级讲师
我要私信

TA的文章

阅读更多

云社区相关服务

提问 提问 学习 学习 认证 认证 产品 产品 技术服务 技术服务 售前咨询 售前咨询
最新活动
阅读需要支付1元查看
UCloud （优刻得科技股份有限公司）

UCloud （优刻得科技股份有限公司）是中立、安全的云计算服务平台，坚持中立，不涉足客户业务领域。公司自主研发IaaS、PaaS、大数据流通平台、AI服务平台等一系列云计算产品，并深入了解互联网、传统企业在不同场景下的业务需求，提供公有云、混合云、私有云、专有云在内的综合性行业解决方案。

Copyright © 2012-2023 UCloud 优刻得科技股份有限公司｜沪公网安备 31011002000058号｜ 沪ICP备12020087号-3｜
<