Loading... # VueJS 子传父组件开发（图片URL传为例） 父组件用法,在 `url`內填入图片地址即可： ```vue <ImgRight url="/images/advan02.jpg" class="shadow-lg"/> ``` 子组件开发： ```vue <script setup lang="ts"> defineProps({ url: String, }); </script> <template> <div class="image-container"> <img :src="url" alt="Example Image" style=""> </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 的响应式系统和函数式编程有更好的理解 | 最后修改：2025 年 04 月 09 日 © 允许规范转载 打赏 赞赏作者 赞 咱们谁跟谁，用不着～