2021-09-08 vue slot组件作用域

在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。它取代了 slot 和 slot-scope 这两个目前已被废弃但未被移除且仍在文档中的 attribute。以此为背景。vue2.6.0

插槽内容

// 定义组件  slotDemo1.vue
<template>
  <div>
    哈尔的移动城堡
    <slot></slot>
  </div>
</template>

// 引入组件
import slotDemo from './components/slotDemo1.vue'
components: {
  slotDemo
}

<template>
  <div id="app">
    <div>宫崎骏的漫画</div>
    <slot-demo></slot-demo>
  </div>
</template>

image.png

<template>
  <div id="app">
    <div>宫崎骏的漫画</div>
    <slot-demo>
      <section style="color:lightseagreen;">千与千寻</section>
    </slot-demo>
  </div>
</template>

image.png

不难看出，slot插槽的使用允许用户自由定义元素、文字、样式

具名插槽

// 定义组件 slotDemo2.vue
<template>
  <div>
    <div>头部：</div>
    <slot name="header"></slot>
    <div>身体：</div>
    <slot name="body"></slot>
    <div>美足：</div>
    <slot name="footer"></slot>
  </div>
</template>

// 引入组件
import slotDemo from './components/slotDemo2.vue'
components: {
  slotDemo
}
<template>
  <div id="app">
    <div>格林童话-白雪公主的描述</div>
    <slot-demo>
      <template v-slot:header>
        <div>乌黑亮丽的头发</div>
      </template>
      <template v-slot:body>
        <div>白皙光滑的皮肤</div>
      </template>
      <template v-slot:footer>
        <div>小巧玲珑的小脚</div>
      </template>
    </slot-demo>
  </div>
</template>

image.png

这里定义了三个插槽，分别名称为header、body、footer。使用时候，对应插入内容。

作用域插槽

// 定义组件 slotDemo3.vue
<template>
  <div>
    <div>{{flower.name}}</div>
    <slot v-bind:flower="flower"></slot>
  </div>
</template>

<script>
export default {
  name: "slotDemo3",
  data() {
    return {
      flower:{
        name:'向日葵',
        color:'黄色的',
        remark:'一直追随太阳，如同我追随vue'
      }
    }
  }
}
</script>

<template>
  <div id="app">
    <div style="margin-bottom:12px;">我喜欢的花：</div>
    <slot-demo>
      <template v-slot:default="slotScope">
        <div>颜色：{{slotScope.flower.color}}</div>
        <div>花语：{{slotScope.flower.remark}}</div>
      </template>
    </slot-demo>
  </div>
</template>

<script>
import slotDemo from './components/slotDemo3.vue'

export default {
  name: 'App',
  components: {
    slotDemo
  }
}
</script>

image.png
子组件使用v-bind:定义对外暴露的数据flower，父组件使用v-slot:default接收子组件传递的数据。注意点：这里的flower作用域仅限于template有效(<template v-slot:default="slotScope">)，用过element的el-table感到熟悉吗，结合理解

// el-table
<el-table-column label="操作">
  <template slot-scope="scope">
    <el-button @click="handleEdit(scope.row)" icon="el-icon-edit" size="mini">编辑</el-button>
    <el-button @click="handleDelte(scope.row)" icon="el-icon-delete" size="mini">删除</el-button>
  </template>
</el-table-column>

官网的一句话，作为一条规则，请记住

父级模板里的所有内容都是在父级作用域中编译的；子模板里的所有内容都是在子作用域中编译的。

具名作用域插槽

// 定义 slotDemo4.vue
<template>
  <div>
    <slot name="gril" v-bind:user="user"></slot>
  </div>
</template>

<script>
export default {
  name: "slotDemo4",
  data() {
    return {
      user:{
        name:'mavis',
        age:22
      }
    }
  }
}
</script>

<template>
  <div id="app">
    <div style="margin-bottom:12px;">我</div>
    <slot-demo>
      <template v-slot:gril="slotScope">
        <div>姓名：{{slotScope.user.name}}</div>
        <div>年龄：{{slotScope.user.age}}</div>
      </template>
    </slot-demo>
  </div>
</template>
<script>
import slotDemo from './components/slotDemo4.vue'

export default {
  name: 'App',
  components: {
    slotDemo
  }
}
</script>

定义了具名： v-slot:gril="slotScope" ；如果没有定义具名，系统默认default，语法：v-slot:default="slotScope"