VueJS 子传父组件开发（图片URL传为例）
父组件用法,在url內填入图片地址即可：
<ImgRight url="/images/advan02.jpg" class="shadow-lg"/>子组件开发：
<script setup lang="ts">
defineProps({
url: String,
});
</script>
<template>
<div class="image-container">
<img :src="url" alt="Example Image" />
</div>
</template>
<style scoped lang="scss">
.image-container {
width: 560px; /* 设置容器的宽度 */
height: 660px; /* 设置容器的高度，可以根据需求调整 */
overflow: hidden; /* 隐藏超出的部分 */
}
img {
width: 100%; /* 使图片宽度适应容器 */
height: 100%; /* 使图片高度适应容器 */
object-fit: cover; /* 图片保持比例并铺满容器，超出部分会被裁切 */
}
</style>一、组合式 API（Composition API）方式
二、组合式 API（Composition API）
三、区别
| 特性 | 选项式 API（Options API） | 组合式 API（Composition API） |
|---|---|---|
| 定义方式 | 通过 export default 和一个对象来定义 | 通过 setup() 函数来定义 |
| 适用场景 | 简单组件或快速开发，适合初学者 | 复杂的组件或大规模应用，代码逻辑需要更高的可复用性和可维护性 |
| 代码组织 | 按照 data, methods, computed 等组织 | 可以根据功能逻辑组织，增加代码复用性和模块化 |
| 灵活性 | 较低，所有的逻辑被分成了不同的部分 | 高，允许按需组合功能或拆分逻辑，易于管理复杂功能 |
| 类型支持 | 类型支持通过 Vue.extend 和 defineComponent 进行类型推导 | 更好的类型推导，通过 TypeScript 的 defineProps, defineEmits 提供增强的类型支持 |
| 学习曲线 | 更容易上手，适合初学者 | 学习曲线较陡，需要对 Vue 3 的响应式系统和函数式编程有更好的理解 |