Vue-多级组件嵌套传值
遇到多级组件嵌套传值的时候我们想到的应该是
1.props 和 $emit (如果嵌套组件过多的话，会使代码逻辑过于繁琐)
2. Vuex (一般用于大型项目中，只是用来传值有点大材小用了)
3. Bus (建一个公共的js双方传值和获取值，这种方法不能很好的实现事件监听)
Vue 2.4版本开始，新增了$attrs 和 $listeners方法用于隔代传值
$attrs: 用于传递属性 inheritAttrs: false,(这个属性可以让传递的属性不显示在标签上)
$listeners: 用于传递方法
搞个案例
// 祖组件
<child1 :p-child1="child1" :p-child2="child2" :p-child3="child3" v-on:test1="onTest1" v-on:test2="onTest2" >
// 父组件
in child1:
props: {{pChild1}}
// 步骤3：步骤1 props获取到的值在此处展示$attrs: {{$attrs}}
// 步骤4： 除去props展示的其他没有展示的属性
// 步骤5：没有展示的属性使用 v-bind="$attrs" 传递属性 v-on="$listeners" 传递方法
// 子组件
in child2:
props: {{pChild2}}
// 步骤3：props获取到的属性值用于展示$attrs: {{$attrs}}
// 步骤4：传递的没有被props所接收的其他属性
** 给大家展示一下
inheritAttrs：false 的时候
inheritAttrs: true 的时候 (因为在父组件中 props：['pChild1']) 所以只展示没有被获取的
最后的结果展示