1. Register the component
1.1 Global registration
Vue.component(tagName, options)
eg
Vue.component("tag", {
template: '<div>hello component!</div>',
props:{
}
})
Once a component is registered, it can be used as a custom element <my-component></my-component> in an instance's template .
Take care to ensure that the component is registered before the root instance is initialized
Note: Components must be in a vue instance before they can be used.
1.2 Partial Registration
2.data must be a function
3. Component combination
The original intention of component design is to be used together, and the most common one is to form a parent-child component relationship: component A uses component B in its template. They must communicate with each other: the parent component may send data to the child component, and the child component may inform the parent component of what is happening inside it. However, it is also important to decouple parent and child components as much as possible through a well-defined interface. This ensures that the code of each component can be written and understood in a relatively isolated environment, thereby improving its maintainability and reusability.
3.1 Parent-child component communication
Subcomponents can use props to synchronize data with the parent component: bind the properties in the template to the data of the parent component [v-bind], and use the value of props in the template, so that the parent and child components can communicate indirectly .
Attributes using v-bind will be parsed as JavaScript code. E.g:
<comp some-prop="1+1" />
<comp v-bind:some-prop="1+1" />
->>
Attributes [props] can also be defined in the form of objects, which are mainly used for data validation:
props:{
name:String,
age:{
type:Number，
default:100 | function(){ return 200; },
required:true
}...
}
type Can be the following native constructors:
- String
- Number
- Boolean
- Function
- Object
- Array
- Symbol
Vue will throw a warning (if using the development build) when prop validation fails. Note that props are validated before the component instance is created, so instance properties such as , or , are not yet available in default or validator functions .datacomputedmethods
3.2 Non-prop features
Add features, you can also add other attributes to elements [class, id, name, etc.]
4. Custom Events
、