vue $attrs与$listeners
Opened this issue · 0 comments
PaulChess commented
1. vm.$attrs
- 2.4.0新增
- 类型
{ [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框上,可以得到:
inheritAttrs
- 2.4.0新增
- 类型 boolean
- 默认值 true
- 详细
默认情况下: 父作用域的不被认作props
的特性绑定将会回退
且作为普通的HTML特性应用在子组件的根元素上
。通过设置inheritAttrs
为false
, 可以取消此默认行为。通过$attrs可以让这些特性生效且可以通过v-bind显性地绑定到非根元素上
注意: 和$attrs拿到的值不同,这个选项不影响class和style绑定
3. $listeners
- 2.4.0新增
- 类型
{ [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 }。