catalogue
1, $attrs
In the process of using components, we sometimes need to pass Prop to encapsulated sub components
For example:
<template>
<el-input v-model="innerVal" placeholder="placeholder"
@input="$emit('input',$event)"
>
</el-input>
</template>
<script>
export default {
name: "MyInput",
data(){
return{
innerVal:this.value
}
},
watch:{
value(){
if(this.value!==this.innerVal){
this.innerVal=this.value
}
}
}
}
</script>
<style scoped>
</style>
We encapsulate the my input component again
Requirement: pass the original clear attribute of El input to my input component
Original practice:
We can declare the clear attribute in the my input component and receive the clear attribute through the my input component
Then pass it to the El input component:
Parent component did not pass a clearable value:
The parent component passes the clearable value:
However, if each Prop requires a parent component declaration and then passes it to the child components one by one, it will be too troublesome
At this point, we can use the $attrs attribute on the component instance to simplify the process
This property contains the Prop that the component is passed in but not declared
We can print this attribute to see:
Step 1: clear the previous declaration
Step 2: print the $attrs attribute in the create hook
View print results:
This includes the clearable attribute we passed in
Next, we can use the v-bind instruction to bind the attributes in $attrs to the child components by passing in the object, so that the parent component can easily pass these prop s to the child components without declaration
In this way, the parent component can easily pass these prop s to the child component without declaration
However, it should be noted that Vue will bind the incoming but undeclared prop of the component to the root element of the component as an HTML attribute:
Therefore, we need to deal with this situation with the following properties
Set its value to false to avoid this behavior
solve:
$attrs is actually a bridge for transmitting data
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Title</title>
</head>
<body>
<div id="app">
<the-parent :rootData="rootData"></the-parent>
</div>
<template id="theParent">
<the-children v-bind="$attrs"></the-children>
</template>
<template id="theChildren">
<div>Sub component display:{{rootdata}}</div>
</template>
<script src="../js/vue.js"></script>
<script>
const app = new Vue({
el: '#app',
data: {
rootData: "Data of root component"
},
components: {
theParent: {
template: "#theParent",
// inheritAttrs:false,
created() {
console.log(this.$attrs)
},
components: {
theChildren: {
template: "#theChildren",
props: ['rootdata'],
}
}
}
}
});
</script>
</body>
</html>
Operation results:
2, $listeners
Just now, we introduced how to pass prop to the sub component. If we want to pass the event handler function to the sub component
Original practice:
We first bind an event handler function to the sub component
Then trigger the event in the event handler function
To trigger the handler bound to the parent component
result:
New usage:
Similar to the usage of $attrs, when we need to pass the event handler function to the child component, we can use the $listeners attribute on the parent component instance, which contains the event handler function received by the component
Now we bind the clear event handler to the MyInput parent component,
Let's also print the $listeners attribute in the created hook first
This $listeners contains the clear handler we passed in
Remove the original practice
Now we forward this handler function directly to the sub component with the v-on instruction
You can directly receive the processing events of the parent component:
