$props
官网内容
https://cn.vuejs.org/v2/api/#vm-props
2.2.0 新增
- 类型:Object
- 详细:
当前组件接收到的 props 对象。Vue 实例代理了对其 props 对象属性的访问。
$attrs属性
官网内容:
https://cn.vuejs.org/v2/api/#vm-attrs
2.4.0 新增
- 类型:{ [key: string]: string }
- 只读
- 详细:
包含了父作用域中不作为 prop 被识别 (且获取) 的特性绑定 (class 和 style 除外)。当一个组件没有声明任何 prop 时,这里会包含所有父作用域的绑定 (class 和 style 除外),并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
个人理解
$attrs即父元素绑定的属性中未在该组件的props中声明的属性值(除了class和style),可以通过这一属性在组件的目标元素中绑定这些属性。
$listeners
官网内容
2.4.0 新增
- 类型:{ [key: string]: Function | Array<Function> }
- 只读
- 详细:
包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创建更高层次的组件时非常有用。
个人理解
可以通过$listeners获取父元素定义的事件,将对应事件绑定在子组件对应的元素上
综合举例
//父组件
<template>
<div id="app">
<div>
<dailog-test/>
<hello-world
name='hah'
age='12'
father='tom'
@focus="focusInput"
@click="clickMe"
>
<div slot="footer" @click='slotClick'>hahhahahah</div>
</hello-world>
</div>
</div>
</template>
<script>
import dailogTest from './components/dailogTest.vue'
import HelloWorld from './components/HelloWorld.vue'
export default {
name: 'app',
components: {
dailogTest,
HelloWorld
},
methods: {
focusInput() {
console.log('focus')
},
clickMe() {
console.log('click')
},
slotClick() {
console.log('slotClick')
}
}
}
</script>
// 子组件
<template>
<div>
genyuansu
<div @click="header">hahahha</div>
<!-- 在input上有父元素所有的事件 -->
<input
v-bind='{...$attrs, ...$props}'
v-on="$listeners"
>
<!-- 在input上只有父元素点击事件 -->
<input
v-bind='{...$attrs, ...$props}'
v-on="{click: $listeners.click}"
>
<slot name='footer' @click="footerC"></slot>
</div>
</template>
<script>
export default {
inheritAttrs: false,
props: ['name', 'age'],
data() {
return {
}
},
created() {
},
mounted() {
this.$nextTick(() => {
console.log(this.$props)
console.log(this.$listeners)
console.log(this.$attrs)
})
},
methods: {
header(){
console.log('header')
},
// 无用,元素在哪里,在哪里声明方法,否则无用
footerC() {
}
}
}
</script>
<style scoped>
input {
margin-right: 20px;
}
</style>
在子元素中可以绑定上父元素传递过来的props和非props($attrs)属性
可看到打印出来的$props,$liseners,$attrs
分别点击1,2两个输入框的结果如上,1号输入框有父元素的focus和click事件,2号输入框有父元素的click事件