1. Custom instruction

2. Data bidirectional binding ::value + @input

v-model Act on form elements

Use of custom components v-model after , The parent component does not need to listen to the event triggering of the child component

.sync Grammar sugar

3. Component communication

1. Cross level access :$emit, Too many components can be troublesome ,vue Provided $root and $parent Two attributes ( Strong coupling ), Accessing the root and parent nodes of a component , Parent component passed ref Access subcomponents

Dependency injection : Parent component provide Corresponding attribute , Subcomponents pass injected To use provide Data provided ,injected Internal adoption of $parent Find the corresponding attribute to the parent node , So it's still strong coupling

3. Secondary packaging of components : When modifying the style of the third-party library , use >>>, That's it , You don't have to drive another one alone style

This is a right choice element
input The second encapsulation of components based on ,vue Provided $attrs and $listeners, Convenient to develop secondary packaging , In this way, you don't need to implement custom components separately v-model, also el-input Corresponding methods

4. vue plug-in unit

Mixins: The lifecycle hook function is executed before the hook function of the component ,methods If there are duplicate names , Using the method

plug-in unit :Vue.use(plugin)

5. vue Code reuse scheme :

1. Mixin

2. HOC Hihger order component The function takes the component as an argument , And returns a new component

3. RenderLess assembly
// Parent component with slot SearchWrapper.vue <slot name="searchContent" :data="advanced" /> //
The data of the parent component is used in the child component <search-wrapper @search="searchWarehouseAreaList"
@reset="resetForm"> <a-form-model ref="searchForm" :labelCol="{ span: 5 }"
:wrapperCol="{ span: 18, offset: 1 }" :model="searchModel" layout="horizontal"
slot="searchContent" slot-scope="scopeData"> //
there scopeData.data That points to the parent component :data, that is advanced