Vue里$attrs的使用

221 阅读1分钟

$attrs是vue2.4.0新增的一个string属性,只读,包含了父作用域中不作为prop被识别(且获取)的特性(class和style除外)

** 使用场景如下:** 如果你的项目里一个组件(root)嵌套了子组件(son),子组件(son)又嵌套了子组件(grandson),而且在父组件(root)里需要自定义的属性很多,传递给子组件(son)的数据很多,但是并不是每一个组件都会被son组件用到所以vue新增了一个$attrs属性来提高工作效率,具体代码如下:

root组件:

<template>
  	<son  :name="name" :age="age" :title="title" :sex="sex"/>
</template>

son组件:

<template>
	<h1>{{name}}</h1>
	<grandson v-bind="this.$attrs"/>//$attrs可以获取到没有使用的注册属性
</template>

<script>
export default{
	props:{
    	name:'String'
	}
</script>

如上可见,son组件的prop中只接收了name属性,其他没有使用的注册属性可以使用this.$attrs获取,并继续向下传递

grandson组件:

<template>
	<h1>
        age:{{age}}
        title:{{title}}
        sex:{{sex}}
    </h1>
</template>
<script>
	export default{
    props:{
        age:'Number',
        title:'String',
        sex:'String'
    }
</script>