Vue#组件

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

组件：

组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。

使用：

使用Vue.extend()创建一个构造器

var userdefined = Vue.extend({ ... })

创建好元素之后，开始注册元素，让你定义的元素可以使用。

这里使用Vue.component去注册组件

// 全局注册组件，tag 为 my-component
Vue.component('u', userdefined)

官方这里有一个注意：

对于自定义标签名字，Vue.js 不强制要求遵循 W3C 规则（小写，并且包含一个短杠），尽管遵循这个规则比较好。

注册之后，就可以在HTML元素中使用了

这里写了个一个小例子，实现组件内的数据绑定，方法实现，链接：

https://jsfiddle.net/miloer/x00grrts/

注意组件的模板替换了自定义元素，自定义元素的作用只是作为一个挂载点。这可以用实例选项 replace 改变。

局部注册：

在自定义组件里，添加另一个自定义组件，只是在父元素组件里进行调用。链接：

https://jsfiddle.net/miloer/x00grrts/1/

一开始我以为这么用：

html:

但这样只解析other的，而且这样还不符合Vue的设计风格，然后在想想，明白了。

注册语法糖

// 在一个步骤中扩展与注册
Vue.component('my-component', {
template: '<div>A custom component!</div>'
})// 局部注册也可以这么做
var Parent = Vue.extend({
components: {
'my-component': {
template: '<div>A custom component!</div>'
}
}
})

为了让事件更简单，可以直接传入选项对象而不是构造器给 Vue.component() 和component 选项。Vue.js 在背后自动调用 Vue.extend()

模板解析

Vue 的模板是 DOM 模板，使用浏览器原生的解析器而不是自己实现一个。相对于字符串模板这有一些好处，但是也有问题。DOM 模板必须是有效的 HTML 片段。一些 HTML 元素对什么元素可以放在它里面有限制。常见的限制：

a 不能包含其它的交互元素（如按钮，链接）
ul 和 ol 只能直接包含 li
select 只能包含 option 和 optgroup
table 只能直接包含 thead, tbody, tfoot, tr, caption, col, colgroup
tr 只能直接包含 th 和 td

在实际中，这些限制会导致意外的结果。尽管在简单的情况下它可能可以工作，但是你不能依赖自定义组件在浏览器验证之前的展开结果。例如<my-select><option>...</option></my-select> 不是有效的模板，即使 my-select 组件最终展开为 <select>...</select>。

另一个结果是，自定义标签（包括自定义元素和特殊标签，如<component>、<template>、 <partial> ）不能用在 ul, select, table 等对内部元素有限制的标签内。放在这些元素内部的自定义标签将被提到元素的外面，因而渲染不正确。

对于自定义元素，应当使用 is 特性：

<template> 不能用在 <table> 内，这时应使用 <tbody>，<table> 可以有多个<tbody>：

Props

组件里的涉及的内容挺多的，不过越丰富功能就越完善。

使用props传递数据，组件实例的作用域是孤立的。这意味着不能并且不应该在子组件的模板内直接引用父组件的数据。可以使用 props 把数据传给子组件。“prop” 是组件数据的一个字段，期望从父组件传下来。子组件需要显式地用 props 选项声明 props。

我觉得这样可以在视图层显示的传递数据，假如你封装了一个form组件，增强复用性，就可以动态的更改action method方法了。当然，这个是我目前看到prosps 突然想到的，也能解决目前的一个小问题。

写了两个demo，链接：

https://jsfiddle.net/xeu84559/1/

https://jsfiddle.net/x00grrts/2/

camelCase-vs-kebab-case

HTML 特性不区分大小写。名字形式为 camelCase 的 prop 用作特性时，需要转为 kebab-case（短横线隔开）：

Vue.component('child', {
// camelCase in JavaScript
props: ['myMessage'],
template: '<span>{{ myMessage }}</span>'
})

<child my-message="hello!"></child>

props验证

组件可以为 props 指定验证要求。当组件给其他人使用时这很有用，因为这些验证要求构成了组件的 API，确保其他人正确地使用组件。此时 props 的值是一个对象，包含验证要求：

Vue.component('example', {
props: {
// 基础类型检测（`null` 意思是任何类型都可以）
propA: Number,
// 多种类型 (1.0.21+)
propM: [String, Number],
// 必需且是字符串
propB: {
type: String,
required: true
},
// 数字，有默认值
propC: {
type: Number,
default: 100
},
// 对象/数组的默认值应当由一个函数返回
propD: {
type: Object,
default: function () {
return { msg: 'hello' }
}
},
// 指定这个 prop 为双向绑定
// 如果绑定类型不对将抛出一条警告
propE: {
twoWay: true
},
// 自定义验证函数
propF: {
validator: function (value) {
return value > 10
}
},
// 转换函数（1.0.12 新增）
// 在设置值之前转换值
propG: {
coerce: function (val) {
return val + '' // 将值转换为字符串
}
},
propH: {
coerce: function (val) {
return JSON.parse(val) // 将 JSON 字符串转换为对象
}
}
}
})