Vue.js组件 Props

<!-- 父组件 -->
<template>
  <child-component
    title="欢迎学习Vue.js"
    :count="totalCount"
    :is-active="true"
    :items="itemList"
  />
</template>

<script>
export default {
  data() {
    return {
      totalCount: 42,
      itemList: ['Vue', 'React', 'Angular']
    }
  }
}
</script>
                            

// 子组件
export default {
  // 声明props
  props: {
    title: String,
    count: Number,
    isActive: Boolean,
    items: Array
  },
  template: `
    <div>
      <h2>{{ title }}</h2>
      <p>计数: {{ count }}</p>
      <p v-if="isActive">状态: 激活</p>
      <ul>
        <li v-for="item in items" :key="item">{{ item }}</li>
      </ul>
    </div>
  `
}
                            

// UserCard.vue - 子组件
export default {
  name: 'UserCard',

  props: {
    // 必需的用户信息
    user: {
      type: Object,
      required: true,
      validator: function(value) {
        // 验证user对象是否包含必需字段
        return value &&
               typeof value.name === 'string' &&
               typeof value.email === 'string'
      }
    },

    // 可选的显示选项
    showAvatar: {
      type: Boolean,
      default: true
    },

    avatarSize: {
      type: String,
      default: 'medium',
      validator: function(value) {
        return ['small', 'medium', 'large'].includes(value)
      }
    },

    showActions: {
      type: Boolean,
      default: false
    },

    status: {
      type: String,
      default: 'active',
      validator: function(value) {
        return ['active', 'inactive', 'pending'].includes(value)
      }
    },

    // 数字验证
    rating: {
      type: Number,
      default: 0,
      validator: function(value) {
        return value >= 0 && value <= 5
      }
    },

    // 自定义类名
    customClass: {
      type: String,
      default: ''
    },

    // 回调函数
    onEdit: {
      type: Function,
      default: () => {}
    },

    onDelete: {
      type: Function,
      default: () => {}
    }
  },

  computed: {
    // 根据status计算样式类
    statusClass() {
      return {
        'active': this.status === 'active',
        'inactive': this.status === 'inactive',
        'pending': this.status === 'pending'
      }
    },

    // 根据avatarSize计算尺寸
    avatarSizeClass() {
      return `avatar-${this.avatarSize}`
    }
  },

  methods: {
    handleEdit() {
      this.onEdit(this.user.id)
    },

    handleDelete() {
      this.onDelete(this.user.id)
    }
  },

  template: `
    <div class="user-card" :class="[customClass, statusClass]">
      <div class="user-header">
        <div v-if="showAvatar" class="user-avatar" :class="avatarSizeClass">
          {{ user.name.charAt(0).toUpperCase() }}
        </div>
        <div class="user-info">
          <h3 class="user-name">{{ user.name }}</h3>
          <p class="user-email">{{ user.email }}</p>
          <div class="user-rating">
            <span v-for="i in 5" :key="i"
                  :class="i <= rating ? 'star-filled' : 'star-empty'">
              ★
            </span>
          </div>
        </div>
      </div>

      <div v-if="showActions" class="user-actions">
        <button @click="handleEdit" class="btn-edit">
          编辑
        </button>
        <button @click="handleDelete" class="btn-delete">
          删除
        </button>
      </div>
    </div>
  `
}
                            

<!-- 父组件使用示例 -->
<template>
  <div>
    <!-- 使用默认值 -->
    <user-card :user="currentUser" />

    <!-- 自定义所有选项 -->
    <user-card
      :user="currentUser"
      :show-avatar="false"
      avatar-size="large"
      :show-actions="true"
      status="active"
      :rating="4"
      custom-class="highlight-card"
      :on-edit="handleEditUser"
      :on-delete="handleDeleteUser"
    />

    <!-- 使用对象绑定 -->
    <user-card :user="{
      name: '张三',
      email: 'zhangsan@example.com'
    }" />
  </div>
</template>

<script>
import UserCard from './UserCard.vue'

export default {
  components: {
    UserCard
  },

  data() {
    return {
      currentUser: {
        id: 1,
        name: '李四',
        email: 'lisi@example.com'
      }
    }
  },

  methods: {
    handleEditUser(userId) {
      console.log('编辑用户:', userId)
    },

    handleDeleteUser(userId) {
      console.log('删除用户:', userId)
    }
  }
}
</script>