“This is the 11th day of my participation in the First Challenge 2022. For details: First Challenge 2022.”
30. One$attrs
和 $listeners
Application scenarios of
For example, if there are three components A, B, and C, the invocation relationship is as follows: A -> B -> C
$listeners can bind attributes and events of C to B by writing $attrs and $listeners to C when B calls C, and can retrieve attributes and events of C when A calls B.
This approach is useful for repackaging components, such as the element-UI cascading selector component El-Cascader, with only one small change and the rest unchanged.
You can define a Custom-Cascader component
The custom - cascader internal... <el-cascader v-bind="$attrs" v-on="$listeners" ... / >...Copy the code
<custom cascader :options=" XXX "size="mini" @remove-tag=" XXX" /> <custom cascader :options=" XXX "size="mini" @remove-tag=" XXX" />Copy the code
These el-Cascader properties and events can be used directly instead of passing a layer through props, which is very convenient.
31. Have provide and inject been used?
Provide and inject are commonly used for communication between deeply layered components.
This pair of options needs to be used together to allow an ancestor component to inject a dependency into all of its descendants, regardless of how deep the component hierarchy is, and remain in effect for as long as its upstream and downstream relationships are established. – vue document
Everyday business components are generally not used because they can be confusing, and Vuex is used for most projects.
Provide and Inject mainly provide use cases for high-level plug-in/component libraries. Direct use in application code is not recommended. – vue document
As the documentation states, provide and inject are useful for developing component libraries because they don’t normally invoke three-party dependencies like Vuex, so you have to use the provide and inject provided by Vue itself.
For example, the source code for Element-UI makes extensive use of provide and inject.
And its use is to provide the component instance directly, like this
Call properties and methods directly on this instance where needed
Provide and inject are basically used
Of course, although the VUE document is not recommended for use in business development, it is harmless to use it sometimes. Provide and inject are basically used as follows:
// A.vue
export default {
provide: {
name: 'lin'
}
}
// B.vue
export default {
inject: ['name'],
mounted () {
console.log(this.name); // lin
}
}
Copy the code
As you can see, in a. vue, we set provide: name with a value of Lin, which provides the name variable to all its children.
In b. vue, the name variable provided from component A is injected. In component B, this variable is directly accessed through this.name and its value is Lin.
32. Are provide and Inject responsive?
Provide and Inject binding are not responsive. This is intentional. However, if you pass in a listening object, the object’s properties are still responsive. – vue document
Try writing a demo:
<Child /> <button @click="changeName">change</button> data() {return {name: 'Lin ', person: {name: 'Allen' } } }, provide() { return { name: this.name, person: this.person } }, methods: { changeName() { this.name = 'lin12345' this.person.name = 'Adel' } }Copy the code
Within the child components: < p > {{name}} < / p > < p > {{person}} < / p > inject: [' name ', 'person']Copy the code
Sure enough, ordinary variables can’t respond, passed objects, object properties can respond.
33. What are the communication methods between Vue components?
The commonly used:
-
Parent-child component interaction, props and $EMIT, vue unidirectional data flow.
-
$Listeners use $attrs and $Listeners to aggregate attributes and events of child components. These are useful for secondary encapsulation of components without writing specific attribute or event names.
-
Use Vuex for state management
Not commonly used:
-
Use $refs to get the component instance and then the data
-
$parent and $children can be used to retrieve data from parent and child components
-
The use of eventBus for cross-component triggering events to pass data is generally less common
-
Provide and inject are commonly used for basic component development or for component value transfer across many layers.
-
Pass common logic through mixins.
There is nothing wrong with writing component libraries like provide/inject and mixins, but it is best not to use them in business components.
Because after the project is complicated, it is easy to cause confusion, do not know where the data is transmitted from, global search called attribute name or function name, the result comes out a lot of, too uncomfortable.
It is acceptable to manage business components as folders, each with its own internal mixins.
But it’s also a pain in the ass. The day-to-day code development is going from up and down to left and right, but it allows us to have less code in individual files, and it’s still a little more elegant.
For example, $refs, $parent, and $children, I usually use them only a little unless I have to, because the direction of the data is not obvious after using these component communication methods. If I search for attributes or methods in this file, I cannot find the source. I need to read the code of this file carefully to know the direction of the data. Development efficiency is reduced.
If you find this article helpful, just give me a small like
The issue of
Master LRU Cache from keep-alive source code
Vue 100 ASK (27-29) what you understand about Vue slots
Vue 100 Q (23-26 Q) What is the nature of the Vue instruction?
Vue 100 Q (18-22 q) Tell us about your understanding of the Vue life cycle
Vue100 q (questions 6-17)
Vue100 asks (question 5) why can’t v-for’s key be index?
Vue100 Q (Question 4) Tell me about a Vue modifier you’ve used in your daily life
Vue100 Q (2-3 Q) When is the. Sync modifier used?
Question (1) How to achieve bidirectional binding without using V-Model?