©2020-2024 ioDraw All rights reserved
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
2.
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
Technology