作用域插槽 slot-scope

发表于 | 分类于

前言

最近发现之前学的有些知识点都忘了…还是记博客吧。

作用域插槽

一个组件中有一个插槽，我们在插槽里写一个div，那么这个div就会被渲染到这个组件里，但是这个div又想调用这个组件里的数据或方法，那怎么办呢？我们可以加一个变量，把它带进插槽中。
简单来说：作用域插槽是一个带绑定数据的插槽。

举例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
// 父组件
<template>
  <div id="app">
    <child>
      <template slot-scope="{close}">  // 解构
        <!-- 插槽获得了组件的 close 方法 -->
        <button @click="close"></button>
      </template>
    </child>
  </div>
</template>
<script>
import child from './child';
export default {
  name: 'app',
  components: {
    child
  }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
//子组件
<template>
  <div class="child">
    <!-- 将 close 方法作为一个插槽的 prop 传入 -->
    <slot :close='close'></slot>
  </div>
</template>
<script>
export default {
  methods: {
      close() {
        console.log('close')
      }
  }
}
</script>

同理，如果插槽是一个组件呢？子组件就能拿到父组件的数据了。
所以其实这也是 Vue 中父子组件传递数据的一种方式。