作用域插槽

142 阅读1分钟

1在子组件上定义 slot 可以具名 name='xx' :xx="data里的变量"

2父组件使用 slot=“变量名”

3父组件的这个变量名会绑定子组件的所有属性

//子组件
```<template>
  <div>
    <p>这里是个Pannel3-子组件, 下面是插槽位置</p>
    <slot name="one" :row="slotDefault">{{ slotDefault.default1 }}</slot> //无名氏
  </div>
</template>

<script>
export default {
  data(){
    return {
      slotDefault: {
        default1: "无名氏",
        default2: "张飞"
      }
    }
  }
}
</script>



//父vue
<template>
  <div>
    <!-- 夹着位置不传, slot使用默认内容"无名氏" -->
    <Pannel3></Pannel3>
    <!-- 想要改变默认内容, 但是默认数据在子组件里, 想让插槽使用就使用插槽作用域 -->
  
    <Pannel3>
      <template v-slot:one="scope">
        {{ scope.row.default2 }}  //张飞
      </template>
    </Pannel3>
  </div>
</template>

<script>
import Pannel3 from './Pannel3'
export default {
  components: {
    Pannel3
  }
}
</script>