uni-app 什么是作用域插槽？

推荐答案

在 uni-app 中，作用域插槽（Scoped Slot）是一种允许父组件向子组件传递内容，并且子组件可以将数据回传给父组件的机制。通过作用域插槽，父组件可以访问子组件中的数据，并在插槽内容中使用这些数据。

作用域插槽的核心在于子组件通过 slot 标签的 v-slot 指令将数据暴露给父组件，父组件则可以通过 v-slot 指令接收这些数据，并在插槽内容中使用。

本题详细解读

1. 作用域插槽的基本用法

在子组件中，可以通过 slot 标签的 v-slot 指令将数据传递给父组件。例如：

// www.javascriptcn.com code example
<!-- 子组件 Child.vue -->
<template>
  <div>
    <slot :user="user"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'John',
        age: 30
      }
    };
  }
};
</script>

在父组件中，可以通过 v-slot 指令接收子组件传递的数据，并在插槽内容中使用：

// www.javascriptcn.com code example
<!-- 父组件 Parent.vue -->
<template>
  <Child>
    <template v-slot:default="slotProps">
      <p>Name: {{ slotProps.user.name }}</p>
      <p>Age: {{ slotProps.user.age }}</p>
    </template>
  </Child>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  }
};
</script>

2. 作用域插槽的解构赋值

在父组件中，可以使用解构赋值来简化代码：

// www.javascriptcn.com code example
<!-- 父组件 Parent.vue -->
<template>
  <Child>
    <template v-slot:default="{ user }">
      <p>Name: {{ user.name }}</p>
      <p>Age: {{ user.age }}</p>
    </template>
  </Child>
</template>

3. 具名作用域插槽

作用域插槽也可以与具名插槽结合使用。例如，子组件可以定义多个具名插槽，每个插槽都可以传递不同的数据：

// www.javascriptcn.com code example
<!-- 子组件 Child.vue -->
<template>
  <div>
    <slot name="header" :title="title"></slot>
    <slot name="content" :content="content"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: 'Header Title',
      content: 'This is the content.'
    };
  }
};
</script>

在父组件中，可以通过 v-slot 指令分别接收不同插槽的数据：

// www.javascriptcn.com code example
<!-- 父组件 Parent.vue -->
<template>
  <Child>
    <template v-slot:header="{ title }">
      <h1>{{ title }}</h1>
    </template>
    <template v-slot:content="{ content }">
      <p>{{ content }}</p>
    </template>
  </Child>
</template>

<script>
import Child from './Child.vue';

export default {
  components: {
    Child
  }
};
</script>

4. 作用域插槽的应用场景

作用域插槽在需要将子组件的数据传递给父组件时非常有用，尤其是在需要自定义子组件内容的场景中。例如，表格组件可以使用作用域插槽来允许父组件自定义每一行的渲染方式。

5. 注意事项

• 作用域插槽的数据传递是单向的，父组件只能读取子组件传递的数据，不能直接修改。
• 作用域插槽的命名应当清晰，避免命名冲突。
• 在复杂的组件结构中，合理使用作用域插槽可以提高代码的可读性和可维护性。