Vue中如何构建组件，支持传参、插槽等功能。

news2024/11/13 19:40:56

1. 创建基本的Vue组件

2. 使用组件

3. 支持插槽

3.1 默认插槽

3.2 使用插槽

4. 作用域插槽

5. 使用作用域插槽

总结

在Vue.js中，组件是构建UI的基本单元，通过组件可以实现代码的复用和组织。以下是如何编写可复用的Vue组件的详细步骤，包括传参、插槽等功能的实现。

1. 创建基本的Vue组件

首先，使用Vue单文件组件（.vue 文件）来定义一个组件。以下是一个简单的组件示例：

<!-- MyButton.vue -->
<template>
  <button @click="handleClick">{{ label }}</button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    label: {
      type: String,
      default: '点击我' // 默认值
    }
  },
  methods: {
    handleClick() {
      this.$emit('clicked'); // 发出点击事件
    }
  }
}
</script>

<style scoped>
button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}
button:hover {
  background-color: #0056b3;
}
</style>

2. 使用组件

在父组件中使用这个可复用的组件，并传递参数：

<!-- App.vue -->
<template>
  <div>
    <MyButton label="提交" @clicked="handleSubmit" />
    <MyButton label="取消" @clicked="handleCancel" />
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    MyButton
  },
  methods: {
    handleSubmit() {
      alert('提交按钮被点击');
    },
    handleCancel() {
      alert('取消按钮被点击');
    }
  }
}
</script>

<style>
/* 样式可选 */
</style>

3. 支持插槽

插槽（slot）是Vue中实现组件内容灵活性的关键特性，它允许在使用组件时提供不同的内容。可以使用具名插槽、作用域插槽等多种方式。

3.1 默认插槽

以下是将插槽添加到组件中的示例：

<!-- MyCard.vue -->
<template>
  <div class="card">
    <div class="card-header">
      <slot name="header">默认标题</slot>
    </div>
    <div class="card-body">
      <slot>默认内容</slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'MyCard'
}
</script>

<style scoped>
.card {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin: 10px;
}
.card-header {
  font-weight: bold;
  padding: 10px;
  background-color: #f8f9fa;
}
.card-body {
  padding: 10px;
}
</style>

3.2 使用插槽

现在，在父组件中使用这个MyCard组件，并传递插槽内容：

<!-- App.vue -->
<template>
  <div>
    <MyCard>
      <template #header>
        <h2>自定义标题</h2>
      </template>
      <p>这里是自定义内容</p>
    </MyCard>
  </div>
</template>

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

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

<style>
/* 样式可选 */
</style>

4. 作用域插槽

作用域插槽允许父组件访问子组件提供的内容。通常用于当子组件需要将某些值发送回父组件时。

示例：

<!-- ItemList.vue -->
<template>
  <div>
    <slot v-for="item in items" :item="item" :key="item.id">
      默认内容
    </slot>
  </div>
</template>

<script>
export default {
  name: 'ItemList',
  props: {
    items: {
      type: Array,
      required: true
    }
  }
}
</script>

5. 使用作用域插槽

在父组件中，这样使用ItemList组件：

<!-- App.vue -->
<template>
  <div>
    <ItemList :items="itemList">
      <template v-slot="{ item }">
        <div>{{ item.name }}</div>
      </template>
    </ItemList>
  </div>
</template>

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

export default {
  name: 'App',
  components: {
    ItemList,
  },
  data() {
    return {
      itemList: [
        { id: 1, name: 'Item 1' },
        { id: 2, name: 'Item 2' },
        { id: 3, name: 'Item 3' },
      ]
    }
  }
}
</script>