vue 作用域插槽变化

1

2.5.0之前scope

2

2.5+slot-scope， scope ^废弃但未被移除

3

2.5+ 推荐v-slot， slot-scope ^废弃但未被移除
具体用法
slot-scope

//子组件：
<template>
  <div class="child">
    <h3>子组件</h3>
    // 作用域插槽  可以name="xxx"做具名插槽，同时xdata传值
    <slot :xdata="data"></slot>
  </div>

//父组件：
<template>
  <div class="father">
    <h3>父组件</h3>

    <child>
      // 在子组件内  可以slot="xxx"选择具名插槽，同时slot-scope接收
打印出来是这样的键值对 xdata:...
        <template slot="xxx" slot-scope="scopes">
          {{scopes}}
        </template >
    </child>
  </div>

v-slot

//子组件相同：
<template>
  <div class="child">
    <h3>子组件</h3>
    // 作用域插槽  可以name="xxx"做具名插槽，同时xdata传值
    <slot :xdata="data"></slot>
  </div>

//父组件：
<template>
  <div class="father">
    <h3>父组件</h3>
    <child>
      // 在子组件内  可以v-slot:xxx选择具名插槽，没有可用defalut代替，同时=后面参数接收
打印出来是这样的键值对 xdata:...
        <template v-slot:xxx="scopes">
          {{scopes}}
        </template >
    </child>
  </div>

支持解构,这种和简写#

 <template v-slot:xxx="{scopes}">
          {{scopes}}
        </template >

#后面必有参数，没有用defalut #:defalut

 <template #:xxx="{scopes}">
          {{scopes}}
        </template >