1. Background
In the process of opening antdv, element, and custom components, the most troublesome problems are as follows: 😖
- How do I pass so many properties of the components? Props? v-model? If there are many properties, the transmission is a bit stupid.
- How to call multiple events provided by the component? emit? The code is redundant when there are many events.
- How to call the methods provided by the component? ref The father and son cannot be transmitted through. But this is very convenient in react.
- How to deal with solt? Do you define the transparent transmission by yourself? How to deal with many scoped slots and named slots?
This is a few problems that cannot open up your thinking in a short while when you are preparing to make the second UI component;
2. Solutions and solutions
The first two questions are relatively simple, use$atttsand$listenersTwo component properties can be solved.
a. $attts ：Inherit all parent component attributes (except the attributes, class and style passed by prop) **, which are generally used on child elements of child components;
b $listeners：It is an object that contains all listeners acting on this component, and you can cooperatev-on="$listeners"Point all event listeners to a specific child element of this component. (Equivalent to the event where the child component inherits the parent component)
<templete>
<div>
<div>{{ text }}</div>
<el-input v-bind="$attts" v-on="$listeners" placeholder="Please enter content"></el-input>
</div>
</templete>
<script>
export default {
props:{
text:String,
}
mounted(){
(this.$attrs)
}
}
</script>
<templete>
<div>
<child type="text" v-model="input" text @blur="onBlur"></div>
</div>
</templete>
<script>
export default {
data() {
return {
input: '',
text:'Subcomponentsprops'
}
},
methods:{
onBlur(){
// ...
}
}
}
</script>
Regarding calling methods in child components (child components cannot get the ref of the parent component), I have also seen many solutions online. In terms of convenience, I personally prefer to bind methods directly to component instances.
tips:** Make good use of entries** in object and return a two-dimensional array of type Array<[key:string, value:any?]>
<templete>
<div>
<child ref="childRef" type="text" v-model="input" text @blur="onBlur"></div>
</div>
</templete>
<script>
export default {
data() {
return {
input: '',
text:'Subcomponentsprops'
}
},
mounted(){
(this.$)
},
methods:{
onBlur(){
// ...
}
}
}
</script>
<templete>
<div>
<div>{{ text }}</div>
<el-input ref="inpRef" v-bind="$attts" v-on="$listeners" placeholder="Please enter content"></el-input>
</div>
</templete>
<script>
export default {
props:{
text:String,
}
mounted(){
(this.$attrs)
// Bind ref to component instance const entries = (this.$)
for(const [key, value] of entries){
this[key] = value;
}
}
</script>
The slots are mainly used for $slots, which provide a guarantee for the scope slot data, otherwise an error will be reported;
Tips: traverse object** in vue template and you will get it* value、name*Two values
<templete>
<div>
<child ref="childRef" type="text" v-model="input" text @blur="onBlur">
<template slot="prepend">Http://</template>
</child>
</div>
</templete>
<script>
export default {
data() {
return {
input: '',
text:'Subcomponentsprops'
}
},
mounted(){
(this.$)
},
methods:{
onBlur(){
// ...
}
}
}
</script>
<templete>
<div>
<div>{{ text }}</div>
<el-input ref="inpRef" v-bind="$attts" v-on="$listeners" placeholder="Please enter content">
<templete v-for="(value, name) in $slot" #[name]="slotData">
<slot :name="name" v-bind = "slotData || {}"></slot>
</templete>
</el-input>
</div>
</templete>
<script>
export default {
props:{
text:String,
}
mounted(){
(this.$attrs)
// Bind ref to component example const entries = (this.$)
for(const [key, value] of entries){
this[key] = value;
}
}
</script>
This is the article about the solution ideas and solutions for component 2 opening in Vue. For more related content on Vue component 2 opening, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!