Vue中多级三级组件传值

需求：A --> 子组件B --> 子组件C ，（A页面的参数传值到C页面，但B页面不需要用到传递值）。

分析：有四种方法可以实现，但是前三种各有优缺点，各位看官老爷接着往下看。

方法：
1、props 和 $on、$emit (虽说可以解决多级传值问题，但是假如嵌套层级多的话，代码繁琐且中间容易出错)。
2、Vuex (用于公用数据使用频繁场景，用来传值大材小用)。
3、Bug 中间件 (无法实现事件监听)
4、$attrs、$listeners
$attrs: 用于传递属性 inheritAttrs: false,(这个属性可以让传递的属性不显示在标签上)
$listeners: 用于传递方法

直接上代码：

// A页面<layout-index
          @item-click="layoutClick"
          :layout="layout"ref="layout"
          :videoType="videoType"  // 我们需要传递的参数></layout-index>

// B页面<divclass="layout-index__wrapper"><layout-one v-on="$listeners" v-bind="$attrs"></div>

// C页面<div>$attrs:{{$attrs}}  //$attrs:{"videoType":1}</div>
props:{
	videoType:{
      type: Number,
      default:1},},
inheritAttrs: false, // 设置为false，使得传递的属性不在标签上展示data(){return{}}

今天又学到一个知识，如果各位看官老爷感觉有用，请一键三连！！！