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
©2020 ioDraw All rights reserved
0.96OLED display -4 Line SPI explain C++11 of std::function,std::bind,std::placeholdersJavaScript study ( Function declaration and parameters )QTabWidget Style sheet settings The project passed idea Package and publish to tomcat The server postman Interface test get timestamp and MD5 encryption react Background management configuration route and sidebar :python Simple game code -10 Minutes Python Write a snake game , simple You know? Python What does the foundation include ? Learn something ?10 individual Python Introduction to crawler