Vue组件（上篇）

什么是组件

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

使用组件

注册

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

运行结果&＃xff1a;


A custom component!

局部注册

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

运行结果&＃xff1a;


A child component!

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

报错提示

DOM 模板解析说明

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

&＃xff0c;

&＃xff0c;&＃xff0c;
...

自定义组件被认为是无效的内容&＃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;每晚十点接收系列原创技术推送