第 5 卷

1. 在 Template 模版中使用组件，应使用 PascalCase 模式，并且使用自闭合组件。

正例：

<!-- 在单文件组件、字符串模板和 JSX 中 --> <MyComponent />

<Row><table :column="data"/></Row>

反例：

<my-component /> <row><table :column="data"/></row>

1. 组件的 data 必须是一个函数

当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。因为如果直接是一个对象的话，子组件之间的属性值会互相影响。

正例：

export default { data () {

return { name: 'jack'

} }

}

反例：

export default { data: {

name: 'jack' }

}

1. Prop 定义应该尽量详细

必须使用 camelCase 驼峰命名必须指定类型

必须加上注释，表明其含义

props: { // 组件状态，用于控制组件的颜色

status: { type: String,

required: true, validator: function (value) {

return [ 'succ',

'info', 'error'

].indexOf(value) !== -1 }

}, // 用户级别，用于显示皇冠个数

userLevel：{ type: String,

required: true }

}

1. 为组件样式设置作用域

正例：

<template> <button class="btn btn-close">X</button>

</template>

<!-- 使用 `scoped` 特性 --> <style scoped>

.btn-close { background-color: red;

} </style>

反例：

<template> <button class="btn btn-close">X</button>

</template> <!-- 没有使用 `scoped` 特性 -->

<style> .btn-close {

1. 如果特性元素较多，应该主动换行。

正例：

<MyComponent foo="a" bar="b" baz="c"

foo="a" bar="b" baz="c"

foo="a" bar="b" baz="c"

/>

反例：

<MyComponent foo="a" bar="b" baz="c" foo="a" bar="b" baz="c" foo="a" bar="b"

baz="c" foo="a" bar="b" baz="c"/>

2.1.2. 模板中使用简单的表达式

组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。复杂表达式会让你的模板变得不那么声明式。我们应该尽量描述应该出现的是什么，而非如何计算那个值。而且计算属性和方法

使得代码可以重用。

正例：

<template> <p>{{ normalizedFullName }}</p>

</template>

// 复杂表达式已经移入一个计算属性 computed: {

normalizedFullName: function () { return this.fullName.split(' ').map(function (word) {

return word[0].toUpperCase() + word.slice(1)

}).join(' ')

} }

反例：

<template> <p>

{{