組件數(shù)據(jù)
組件的 data 必須是一個函數(shù)拄衰。
// bad
export default {
data: {
foo: 'bar',
},
};
// good
export default {
data() {
return {
foo: 'bar',
};
},
};
單文件組件文件名稱
單文件組件的文件名應(yīng)該要么始終是單詞大寫開頭 (PascalCase)，要么始終是橫線連接 (kebab-case)。
// bad
mycomponent.vue
myComponent.vue
// good
my-component.vue
MyComponent.vue
緊密耦合的組件名
和父組件緊密耦合的子組件應(yīng)該以父組件名作為前綴命名。
// bad
components/
|- TodoList.vue
|- TodoItem.vue
└─ TodoButton.vue
// good
components/
|- TodoList.vue
|- TodoListItem.vue
└─ TodoListItemButton.vue
自閉合組件
在單文件組件中沒有內(nèi)容的組件應(yīng)該是自閉合的。
<!-- bad -->
<my-component></my-component>
<!-- good -->
<my-component />
Prop 名大小寫
在聲明 prop 的時候蹦魔，其命名應(yīng)該始終使用 camelCase，而在模板中應(yīng)該始終使用 kebab-case咳燕。
// bad
export default {
props: {
'greeting-text': String,
},
};
// good
export default {
props: {
greetingText: String,
},
};
<!-- bad -->
<welcome-message greetingText="hi" />
<!-- good -->
<welcome-message greeting-text="hi" />
指令縮寫
指令縮寫版姑，用 : 表示 v-bind: ，用 @ 表示 v-on:
<!-- bad -->
<input v-bind:value="value" v-on:input="onInput" />
<!-- good -->
<input :value="value" @input="onInput" />
Props 順序
標(biāo)簽的 Props 應(yīng)該有統(tǒng)一的順序迟郎，依次為指令剥险、屬性和事件。
<my-component
v-if="if"
v-show="show"
v-model="value"
ref="ref"
:key="key"
:text="text"
@input="onInput"
@change="onChange"
/>
組件選項(xiàng)的順序
組件選項(xiàng)應(yīng)該有統(tǒng)一的順序宪肖。
export default {
name: '',
mixins: [],
components: {},
props: {},
data() {},
computed: {},
watch: {},
created() {},
mounted() {},
destroyed() {},
methods: {},
};
組件選項(xiàng)中的空行
組件選項(xiàng)較多時表制，建議在屬性之間添加空行。
export default {
computed: {
formattedValue() {
// ...
},
styles() {
// ...
},
},
methods: {
onInput() {
// ...
},
onChange() {
// ...
},
},
};
單文件組件頂級標(biāo)簽的順序
單文件組件應(yīng)該總是讓頂級標(biāo)簽的順序保持一致控乾，且標(biāo)簽之間留有空行么介。
<template>
...
</template>
<script>
/* ... */
</script>
<style>
/* ... */
</style>
