vue 跨级使用slot 传输数据 三级

index.vue

//获取index-2.vue子集的插槽数据  index-2.vue子集的插槽数据来自index-3.vue
 <template #foot="scope"> 获取第三级的数据 {{ scope.row }} </template>

index-2.vue

 //#footer1="scope" 匹配子集index-3的插槽并且获取传输的数据
  <template #footer1="scope">
  	//定义好位置匹配父级index.vue的插槽 把子集传输的数据给父级index.vue获取
        <slot name="foot" :row="scope.row"></slot>
    </template>

index-3.vue

  <div class="footer1">
    <slot name="footer1" :row="11"></slot>
  </div>

你可能感兴趣的:(vue.js,前端)