vue components, data communications, standardized regular pattern. Of vue official style guide summarizes the classification.
1. Component specifications:
1.1 named plurality of word components:
component name should always be a plurality of words, and root component App <transition>, <component> of such components, except the built-Vue.
Doing so avoids with existing and future HTML elements in conflict, because all of the HTML element name is a single word.
1.2 single-file filename component of a large hump or horizontal connections:
start with the word most capital-friendly for auto-complete code editor.
1.3 tightly coupled component name:
sub-assemblies and components parent should be tightly coupled to the parent component name as a prefix name.
If a component is meaningful only at the scene of a parent component, this relationship should be reflected in its name.
Because the editor will usually organize files in alphabetical order, so this can be strung together associated with the file.
Components /
| - TodoList.vue
| - TodoListItem.vue
| - TodoListItemButton.vue
1.4 component name in word order: the
component name should begin with the word high level (usually generalized description), to modify the descriptive word ending.
For example, for use with a search form, it may contain such components:
Components /
| - ClearSearchButton.vue
| - ExcludeFromSearchInput.vue
| - LaunchOnStartupCheckbox.vue
| - RunSearchButton.vue
| - SearchInput.vue
| - TermsCheckbox.vue
Noticed, it is difficult to see which components are for the search. Now we come to the assembly in accordance with the rules of renaming:
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputExcludeGlob.vue
|- SearchInputQuery.vue
|- SettingsCheckboxLaunchOnStartup.vue
|- SettingsCheckboxTerms.vue
Because the editor will usually organize files in alphabetical order, so now at a glance the important relationship between components.
1.5 self-closing components:
there is no content in a single file components, templates and string JSX the components should be self-closing - but never do this in the DOM template.
Note:
Single file components: file suffix .vue
DOM template: template directly in the HTML page mount, is originally written on the page, the browser can be recognized by the HTML structure, it will be rendered in a browser to load, then js acquire content dom nodes,
forming a template dom .
Template string: String template attribute Vue example corresponding to the
example:
Vue.component ( 'Child', {
template: '<span> {{type}} </ span>'
})
2. Data communication specifications:
2.1 Prop definition should be as detailed as possible:
in the code you submitted, the definition should be as detailed prop, at least need to specify its type.
2.2 Prop name big hump, and the template JSX should always use the kebab-case (- connection).
The props: {
greetingText: String
}
<WelcomeMessage greeting-text="hi"/>
3. Component style specifications:
3.1 assembly styling Scope:
For applications, top App assembly and component layout styles can be global, but all other components should be scoped, plus scoped tag in style (<style scoped>).
This rule only and single-file assemblies (file extension .vue) related.
3.2 scoped elements in the selector:
In scoped style, class selector selector better than the elements, because a large number of elements using the selector is very slow.