$attrs
官方解释:
类型: {[key:String]: string}
只读
详细:
包含了父作用域中不作为 prop 被识别 (且获取) 的 attribute 绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
意思:子组件可以通过这个属性获得父组件在子组件上添加的属性(除了子组件prop声明的以外的属性),此外子组件可以通过v-bind="$attr"
的方式,将属性自动绑定到子组件的某标签上
例如:
父组件:
<template>
<div id="app">
<HelloWorld @clickMe="clickMe" :my-name="myName" content="Click me!"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
},
data () {
return {
myName: 'cheng_chen'
}
},
methods: {
clickMe() {
}
}
}
</script>
子组件
<template>
<div class="hello">
<button @click="clickMe">{{ content }}</button>
<div v-bind="$attrs"></div>
<div>{{ $attrs }}</div>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String,
content: String
},
methods: {
clickMe() {
this.$emit('clickMe',1)
}
},
created() {
console.log(this.$attrs);
}
}
</script>
效果图:
$listeners
官方解释:
类型:{ [key: string]: Function | Array }
只读
详细:
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
意思:类似于$attrs,但是不同于$attrs的是:$listeners针对于事件监听器,如果父组件没有通过在事件监听器上添加.native修饰器,父组件作用于子组件的监听事件,子组件可以通过$listeners来获取
实例:
父组件:
<template>
<div id="app">
<HelloWorld @clickMe="clickMe" :my-name="myName" content="Click me!"/>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
HelloWorld
},
data () {
return {
myName: 'cheng_chen'
}
},
methods: {
clickMe() {
}
}
}
</script>
子组件
<template>
<div class="hello">
<button @click="clickMe">{{ content }}</button>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String,
content: String
},
methods: {
clickMe() {
this.$emit('clickMe',1)
}
},
created() {
console.log(this.$listeners);
}
}
</script>
结果: