vue 组件（上篇）

什么是组件

组件 (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 给父组件发送消息。看看它们是怎么工作的。

父子组件-w200

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 组件（上篇）

什么是组件

使用组件

注册

局部注册

DOM 模板解析说明

构成组件

Prop

使用prop传递数据

camelCase vs. kebab-case

动态 Prop

字面量语法 vs 动态语法

单向数据流

Prop 验证

非 Prop 属性

替换/覆盖现有的特性

你可能感兴趣的:(vue 组件（上篇）)