Vue.js组件实战：Java转前端新手如何复用手机模块代码？

嘿，既然你有Java基础，那理解Vue组件其实和Java里的类逻辑很像——能复用、能传参数（类比类的构造参数或者成员变量）！我给你一步步拆解怎么把重复的手机模块改成可复用的Vue组件，保证一看就懂。

假设你之前的重复代码大概长这样（每个手机模块都是几乎一样的div）：

原始重复代码示例：

<div class="phone-card">
  <img src="iphone15.jpg" alt="iPhone 15">
  <h3>iPhone 15</h3>
  <p>价格：¥5999</p>
  <p>内存：128GB</p>
</div>
<div class="phone-card">
  <img src="s24.jpg" alt="Galaxy S24">
  <h3>Galaxy S24</h3>
  <p>价格：¥6499</p>
  <p>内存：256GB</p>
</div>
<!-- 还有3个类似的手机div... -->

我们把单个手机模块抽象成一个组件，就像Java里定义一个PhoneCard类，通过props接收外部传入的手机数据（类比给类的成员变量赋值）。这里用Vue3主流的<script setup>语法糖，更适合入门：

<!-- src/components/PhoneCard.vue -->
<template>
  <!-- 组件的模板结构，用{{ }}和:绑定props里的数据 -->
  <div class="phone-card">
    <img :src="phone.image" :alt="phone.name">
    <h3>{{ phone.name }}</h3>
    <p>价格：¥{{ phone.price }}</p>
    <p>内存：{{ phone.memory }}</p>
  </div>
</template>

<script setup>
// 定义组件接收的参数（props），相当于Java类的入参/成员变量
const props = defineProps({
  phone: {
    type: Object, // 接收的是一个包含手机信息的对象
    required: true, // 必须传入这个参数，否则组件无法正常工作
    // 可选：定义默认值，防止传参为空时出错
    default: () => ({
      name: '',
      image: '',
      price: 0,
      memory: ''
    })
  }
})
</script>

<style scoped>
/* scoped表示样式只作用于当前组件，不会污染全局，类比Java的私有成员 */
.phone-card {
  border: 1px solid #eee;
  border-radius: 8px;
  padding: 16px;
  width: 200px;
  margin: 10px;
  text-align: center;
}
.phone-card img {
  width: 120px;
  height: auto;
}
.phone-card h3 {
  margin: 12px 0;
  font-size: 18px;
}
</style>

接下来在父组件（比如App.vue）里，我们把所有手机数据放在一个数组里（类比Java的List<Phone>），用v-for循环遍历数组，给每个PhoneCard组件传入不同的手机对象：

<!-- src/App.vue -->
<template>
  <div class="phone-list">
    <!-- 用v-for循环生成组件实例，每个实例传入不同的phone数据 -->
    <PhoneCard 
      v-for="phone in phones" 
      :key="phone.id" <!-- key是Vue跟踪列表项的唯一标识，必须添加 -->
      :phone="phone" <!-- 把当前循环的手机对象传给子组件的props -->
    />
  </div>
</template>

<script setup>
// 导入刚才定义的PhoneCard组件，类比Java里的import
import PhoneCard from './components/PhoneCard.vue'

// 模拟手机数据数组，类比Java的List<Phone>
const phones = [
  {
    id: 1,
    name: 'iPhone 15',
    image: 'iphone15.jpg',
    price: 5999,
    memory: '128GB'
  },
  {
    id: 2,
    name: 'Galaxy S24',
    image: 's24.jpg',
    price: 6499,
    memory: '256GB'
  },
  {
    id: 3,
    name: '小米14',
    image: 'mi14.jpg',
    price: 3999,
    memory: '256GB'
  },
  {
    id: 4,
    name: '华为Mate 60',
    image: 'mate60.jpg',
    price: 5499,
    memory: '256GB'
  },
  {
    id: 5,
    name: '一加12',
    image: 'oneplus12.jpg',
    price: 4299,
    memory: '256GB'
  }
]
</script>

<style>
.phone-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px;
}
</style>

• 组件 = Java类：可以多次实例化（类比new PhoneCard()），每个实例可以有不同的属性（props就是属性）。
• props = 构造参数/成员变量：父组件传给子组件的数据，就像给Java类的构造方法传参，或者给成员变量赋值。
• v-for循环 = for-each遍历：和Java里遍历集合一样，生成多个组件实例。
• scoped样式 = 私有成员：只作用于当前组件，不会影响其他组件的样式，类比Java的private修饰符。

这样以后要新增手机，只需要在phones数组里加一个对象就行，完全不用写重复的div代码，完美符合**DRY（Don't Repeat Yourself）**原则！

内容的提问来源于stack exchange，提问作者Dhiaa Eddin Anabtawi