学习- 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