Open PaulChess opened 3 years ago
{ [key: string]: string }
prop
class
style
父组件:
<div id="app"> <base-input label="姓名" class="name-input" placeholder="请输入姓名" test-attrs="$attrs"> </base-input> </div>
子组件:
Vue.component("base-input", { inheritAttrs: true, //此处设置禁用继承特性 props: ["label"], template: ` <label> {{label}}- {{$attrs.placeholder}}- <input v-bind="$attrs"/> </label>`, mounted: function() { console.log(this.$attrs); } });
在子组件里面打印$attrs得到的是: placeholder和test-attrs两个属性。 子组件里面通过v-bind="$attrs"传给了input框,把上面两个属性挂到了input框上,可以得到:
$attrs
placeholder
test-attrs
v-bind="$attrs"
input框
props
回退
子组件的根元素上
inheritAttrs
false
通过$attrs可以让这些特性生效且可以通过v-bind显性地绑定到非根元素上
{ [key: string]: Function | Array<Function> }
.native
v-on
v-on:listeners
v-on="$listeners"
demo: 父组件:
<div id="app"> <child1 :p-child1="child1" :p-child2="child2" :p-child-attrs="1231" v-on:test1="onTest1" v-on:test2="onTest2"> </child1> </div> const app = new Vue({ el: "#app", data: { child1: "pChild1的值", child2: "pChild2的值" }, methods: { onTest1() { console.log("test1 running..."); }, onTest2(value) { console.log("test2 running..." + value); } } });
子组件1:
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"); } });
子组件2:
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> <hr> </div>`, mounted: function() { this.$emit("test2"); } });
上例中,父组件在child1组件中设置两个监听事件test1和test2,分别在child1组件和child1组件内部的child2组件中执行。还设置了三个属性p-child1、p-child2、p-child-attrs。其中p-child1、p-child2被对应的组件的prop识别。所以: p-child1组件中$attrs为{ "p-child2": "pChild2的值", "p-child-attrs": 1231 }; p-child2组件中$attrs为{ "p-child-attrs": 1231 }。
1. vm.$attrs
{ [key: string]: string }
prop
传递的属性、class
和style
)父组件:
子组件:
在子组件里面打印![image](https://user-images.githubusercontent.com/69644161/114020599-5b5ede80-98a2-11eb-904e-9c91f3265553.png)
$attrs
得到的是:placeholder
和test-attrs
两个属性。 子组件里面通过v-bind="$attrs"
传给了input框
,把上面两个属性挂到了input框上,可以得到:inheritAttrs
props
的特性绑定将会回退
且作为普通的HTML特性应用在子组件的根元素上
。通过设置inheritAttrs
为false
, 可以取消此默认行为。通过$attrs可以让这些特性生效且可以通过v-bind显性地绑定到非根元素上
注意: 和$attrs拿到的值不同,这个选项不影响class和style绑定3. $listeners
{ [key: string]: Function | Array<Function> }
.native
修饰器的)v-on
事件监听器。它可以通过v-on:listeners
传入内部组件。它是一个对象,里面包含了所有作用在这个组件上的监听器,可以通过v-on="$listeners"
将事件监听指向这个组件内的子元素(包括内部的子组件)。demo: 父组件:
子组件1:
子组件2:
上例中,父组件在child1组件中设置两个监听事件test1和test2,分别在child1组件和child1组件内部的child2组件中执行。还设置了三个属性p-child1、p-child2、p-child-attrs。其中p-child1、p-child2被对应的组件的prop识别。所以: p-child1组件中$attrs为{ "p-child2": "pChild2的值", "p-child-attrs": 1231 }; p-child2组件中$attrs为{ "p-child-attrs": 1231 }。