学习- vue 中 API $attr 用法

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>

亲儿子组件:

<template>

  <div>

      child:{{  }}

      <Grandson v-bind="$attrs"/>

  </div>

</template>

<script>

import Grandson from './grandson.vue'

export default {

  name: 'Child',

  components: {

    Grandson

  }

}

</script>

亲孙子组件:

<template>

  <div>Grandson:{{ msg }}</div>

</template>

<script>

export default {

  name: 'Grandson',

  props: {

    msg: {

      type: String,

      default: ''

    }

  }

}

</script>

效果展示：

转载：https://www.jb51.net/article/246436.htm#_lab2_1_1