学习- vue 中 API $attr 用法

标签：vue attr Grandson default msg API export 组件

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

 

标签：vue,attr,Grandson,default,msg,API,export,组件
From： https://www.cnblogs.com/huguo/p/16656106.html