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
  }
}

到此结束。