Vue.js功法之练气初期：复习知识点之Vue 插槽（Slots）

Vue 插槽（Slots）

Vue 插槽是一种强大的机制，允许你在父组件中传递内容到子组件的特定位置。它使得组件更加灵活，允许开发者在不同场景下定制组件的外观和行为。

为什么使用插槽？

1. 组件复用： 插槽允许父组件向子组件传递不同的内容，从而增强组件的复用性。
2. 灵活性： 可以根据具体的使用情境，动态地插入内容，使组件更加灵活。

示例代码

考虑一个简单的 Alert 组件，通过插槽实现可定制的内容。

1. 创建 Alert 组件 - Alert.vue

<template>
  <div class="alert">
    <h3>{{ title }}</h3>
    <slot></slot>
  </div>
</template>

<script>
export default {
  props: {
    title: String,
  },
};
</script>

<style scoped>
.alert {
  border: 1px solid #ddd;
  padding: 10px;
  margin: 10px 0;
}
</style>

2. 在父组件中使用 Alert 组件

<template>
  <div>
    <Alert title="警告">
      这是一条重要的消息！
    </Alert>

    <Alert title="注意">
      <p>这是一个带有自定义内容的消息。</p>
      <button @click="handleButtonClick">点击我</button>
    </Alert>
  </div>
</template>

<script>
import Alert from './path/to/Alert.vue';

export default {
  components: {
    Alert,
  },
  methods: {
    handleButtonClick() {
      alert('按钮被点击了！');
    },
  },
};
</script>