Vue组件（上篇）

什么是组件

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

使用组件

注册

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

运行结果&＃xff1a;

局部注册

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

运行结果&＃xff1a;

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

DOM 模板解析说明

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

&＃xff0c;
&＃xff0c;&＃xff0c; 限制了能被它包裹的元素&＃xff0c;而一些像 这样的元素只能出现在某些其它元素内部。
在自定义组件中使用这些受限制的元素时会导致一些问题&＃xff0c;例如&＃xff1a;
...


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




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

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

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

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

  构成组件

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

  

  Prop

  使用prop传递数据

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

  


  运行结果&＃xff1a;

  
hello world!


  camelCase vs. kebab-case

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

  

  


  运行结果&＃xff1a;

  
hello world message!


  如果把child2中的 my-message 改为 myMessage&＃xff0c;

  错误提示&＃xff1a;

  

  动态 Prop

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

  


  


  运行结果&＃xff1a;

  

  字面量语法 vs 动态语法

  


  因为它是一个字面 prop&＃xff0c;它的值是字符串 "1" 而不是 number。如果想传递一个实际的 number&＃xff0c;需要使用 v-bind&＃xff0c;从而让它的值被当作 Javascript 表达式计算&＃xff1a;

  


  单向数据流

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

  Prop 验证

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

  


  错误提示&＃xff1a;

  

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

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



  如果把prop-c去掉&＃xff0c;格式如下

  错误提示&＃xff1a;

  

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

  type 可以是下面原生构造器&＃xff1a;

  • String

  • Number

  • Boolean

  • Function

  • Object

  • Array

  • Symbol

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

  非 Prop 属性

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

  添加属性 data-3d-date-picker&＃61;"true" 之后&＃xff0c;它会被自动添加到 bs-date-input 的根元素上

  替换/覆盖现有的特性

  


  运行结果&＃xff1a;

  



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

  源码&＃xff1a; 源码下载

  Vue组建&＃xff08;下篇&＃xff09;

  社群品牌&＃xff1a;从零到壹全栈部落
  定位&＃xff1a;寻找共好&＃xff0c;共同学习&＃xff0c;持续输出全栈技术社群
  业界荣誉&＃xff1a;IT界的逻辑思维
  文化&＃xff1a;输出是最好的学习方式
  官方公众号&＃xff1a;全栈部落
  社群发起人&＃xff1a;春哥(从零到壹创始人&＃xff0c;交流微信&＃xff1a;liyc1215)
  技术交流社区&＃xff1a;全栈部落BBS
  全栈部落完整系列教程&＃xff1a;全栈部落完整电子书学习笔记

  关注全栈部落官方公众号&＃xff0c;每晚十点接收系列原创技术推送