vue中使用v-bind=“$attrs“多层组件传值

vue中使用v-bind=“$attrs“多层组件传值

vue组件之间通信，props在多级组件中使用有点麻烦，vue2.4版本提供了另一种方法，使用v-bind="$attrs"

例如下面的层级关系

<grandfather>
	<father>
		<grandson>
		</grandson>
	</father>
</grandfather>

• 祖父组件： <grandfather>
• 父组件：<father>
• 祖孙组件：<grandson>

比如说在<grandfather>中传给了<father>组件一些数据

grandfather.vue //祖父文件

<div>
 <father
    id="1"
    name="小红"
    age="18"
    sex="女"
    weight="90"
 >
 </father>
</div>

然后在<father>组件接收一些想要的值

father.vue  // 父组件

<div>
  // 给孙组件绑定 v-bind="$attrs"
  <grandson v-bind="$attrs">
  </grandson>
</div>
props: {
  id: {
     type: Number,
     default: 0
  },
  name: {
     type: String,
     default: ''
  }
}

注意这里并没有接收age、sex、weight这三个值
那么这三个未被<father>组件接收的值就可以通过v-bind="$attrs"传递给<grandson>组件了

最后在<grandson>组件接收想要的值

grandson.vue  // 孙组件

<div>
  // 孙组件
</div>
 
props: {
  age: {
     type: Number,
     default: 0
  },
  sex: {
     type: String,
     default: ''
  },
  weight: {
     type: Number,
     default: 0
  }
}