vm.$attrs
-
2.4.0 new
-
Type {[key: string]: string}
Contains property bindings (except class and style) that are not recognized (and retrieved) as prop in the parent scope. When a component does not declare any prop, all parent-scoped bindings (except class and style) are included, and internal components can be passed in via V-bind =”$attrs” — useful when creating higher-level components.
In simple terms, it contains properties that all parent components set on child components (except properties, classes, and styles passed by prop).
<div id="app">
<base-input
label="Name"
class="name-input"
placeholder="Please enter your name"
test-attrs="$attrs"
></base-input>
</div>
Vue.component("base-input", {
inheritAttrs: true.// Disable inheritance here
props: ["label"].template: ` `.mounted: function() {
console.log(this.$attrs); }});const app = new Vue({
el: "#app"
});
Copy the code
The lifecycle method Mounted prints $attrs to display attributes other than those defined by calss and props. Pass the input tag inside the child component with v-bind=”$attrs”
vm.$listeners
- 2.4.0 new
- Type {[key: string] : Function | Array}
Contains v-ON event listeners in the parent scope (without the.native modifier). Internal components can be passed in via V-on =”$Listeners “– useful for creating higher-level components.
Note that the listeners are an object that contains all listeners working on the component. The listeners can be directed to the child elements of the component by means of V-on =”$Listeners “. We set inheritAttrs to true and add inheritAttrs later.
<div id="app">
<child1
:p-child1="child1"
:p-child2="child2"
:p-child-attrs="1231"
v-on:test1="onTest1"
v-on:test2="onTest2">
</child1></div> <script> Vue.component("Child1", { inheritAttrs: true, props: ["pChild1"], template: ` <div class="child-1"> <p>in child1:</p> <p>props: {{pChild1}}</p> <p>$attrs: {{this.$attrs}}</p> <hr> <child2 v-bind="$attrs" v-on="$listeners"></child2></div>`, mounted: function() { this.$emit("test1"); }}); Vue.component("Child2", { inheritAttrs: true, props: ["pChild2"], template: ` <div class="child-2"> <p>in child->child2:</p> <p>props: {{pChild2}}</p> <p>$attrs: {{this $attrs}} < / p > < button @ click = "$emit (' test2 ', 'button click')" > triggering event < / button > < hr > < / div > `, mounted: function() { this.$emit("test2"); }}); Const app = new Vue({el: "#app", data: {child1: "pChild1 ", child2: "pChild2 "}, methods: { onTest1() { console.log("test1 running..." ); }, onTest2(value) { console.log("test2 running..." + value); }}}); </script>Copy the code
In the example above, the parent component sets two listening events test1 and test2 in child1 and child2, respectively. Three attributes p-child1, p-child2, and p-child-attrs are also set. P-child1 and p-child2 are identified by prop of corresponding components. So:
p-child1
In the component$attrs
for{"p-child2": "pChild2 ", "p-child-attrs": 1231}
;p-child2
In the component$attrs
for{ "p-child-attrs": 1231 }
.
The effect is shown below:
Click the button in the Child2 component to trigger the event, and the console will print:
inheritAttrs
- 2.4.0 new
- The type Boolean
- Default value: true
Attribute bindings that are not recognized as props in the parent scope by default are “rolled back” and applied to root elements of child components as normal HTML features. This may not always behave as expected when writing a component that wraps one target element or another. These default behaviors are removed by setting the inheritAttrs to false. These features are enabled by the instance attribute $attrs (also new in 2.4), and can be explicitly bound to non-root elements by V-bind.
Note: This option does not affect the class and style bindings.
[inheritAttrs: true] [inheritAttrs: true]
Properties placeholder and test-attrs that are not bound by props are displayed on the child component root node. [inheritAttrs: false] [inheritAttrs: false] [inheritAttrs: false]
Properties that are not bound by props are not applied to the root element of the child component as a normal HTML feature.