在这篇文章中，我们将介绍如何使用Vue 3的Composition API来手写一个简单的Card组件。我们将展示该组件的模板、逻辑和样式，以便您了解如何使用Vue 3的最新语法糖来创建可复用的UI组件。
模板
<template> <div class="card"> <img :src="imageUrl" alt="Card Image" /> <div class="card-body"> <h3>{{ title }}</h3> <p>{{ description }}</p> <button @click="handleClick">Click me</button> </div> </div> </template>
以上是Card组件的模板部分。它包括了一个图片、标题、描述和一个点击按钮。
逻辑
<script> import { ref } from 'vue'; export default { setup(props) { const imageUrl = ref(props.imageUrl); const title = ref(props.title); const description = ref(props.description); function handleClick() { alert('Button clicked!'); } return { imageUrl, title, description, handleClick }; }, props: { imageUrl: { type: String, required: true }, title: { type: String, default: 'Card Title' }, description: { type: String, default: 'This is a card component' } } }; </script>
在逻辑部分，我们使用ref来定义响应式变量，并且利用setup函数来设置组件的逻辑。同时，我们也定义了props来接收外部传入的数据。
样式
<style> .card { border: 1px solid #ccc; border-radius: 5px; overflow: hidden; margin: 10px; width: 300px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .card img { width: 100%; height: 200px; object-fit: cover; } .card-body { padding: 15px; } h3 { margin: 0 0 10px 0; } button { padding: 5px 10px; background-color: #007bff; color: #fff; border: none; border-radius: 3px; cursor: pointer; } </style>
最后，我们设置了Card组件的样式，包括边框、阴影、内边距等，以及图片、标题和按钮的样式。
通过以上示例，我们展示了如何使用Vue 3的Composition API来手写一个Card组件。希望这篇文章对你有所帮助！
