学习- vue 中 API $attr 用法-优快云博客

文章介绍了Vue.js中如何通过$attrs属性在父组件向未声明prop的子组件及孙子组件传递数据，展示了从父组件到孙子组件的数据流经过程。

2.4.0新增

定义：包含了父作用域不作为 prop 被识别(且获取)的 attribute 绑定( class 和 style 除外)。当一个组件没有声明任何 prop 时，这里会包含所有父作用域的绑定(除class 和 style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件--在创建高级别的组件时非常有用。

父组件的列表行数据传递给孙子组件展示

父组件：

<template>
  <div>
    Parent: {{ msg }}
    <Child :msg="msg" />
  </div>
</template>

<script>
import Child from './child.vue'
export default {
  name: 'Parent',
  components: { Child },
  data () {
    return {
      msg: 'hello world!'
    }
  }
}
</script>

亲儿子组件:

<div>

child:{{ }}

</div>

</template>

import Grandson from './grandson.vue'

export default {

name: 'Child',

components: {

Grandson

}

</script>