vue中Props与Attrs的实现实例

<!-- 父组件 -->
<ChildComponent title="欢迎页面" />

<!-- 子组件 -->
<script>
export default {
  props: ['title']
}
</script>

<!-- 父组件 -->
<ChildComponent :count="dynamicValue" />

<!-- 子组件 -->
<script>
export default {
  props: ['count']
}
</script>

// 子组件
props: {
  age: {
    type: Number,
    required: true,
    validator: value => value > 0
  }
}

props: {
  theme: {
    type: String,
    default: 'light'
  }
}

<!-- 父组件 -->
<UserProfile v-bind="userData" />

<!-- 等价于 -->
<UserProfile 
  :name="userData.name"
  :age="userData.age"
  :email="userData.email" 
/>

<template>
  <!-- 按钮组件，使用动态class绑定 -->
  <button 
    class="base-btn" 
    :class="computedClasses" 
    v-bind="attrs"  <!-- 透传其他属性（如disabled、title等） -->
  >
    <slot></slot>
  </button>
</template>

<script setup>
import { useAttrs, computed } from 'vue'

// 获取所有透传的非props属性
const attrs = useAttrs()

// 根据透传的属性计算样式类
const computedClasses = computed(() => {
  const classes = []
  
  // 如果透传了type属性，添加对应的样式类
  if (attrs.type) {
    classes.push(`btn-${attrs.type}`)
  }
  
  // 如果透传了size属性，添加对应的样式类
  if (attrs.size) {
    classes.push(`btn-${attrs.size}`)
  }
  
  // 如果透传了round属性，添加圆角样式
  if (attrs.round) {
    classes.push('btn-round')
  }
  
  // 如果透传了special属性，添加特殊样式
  if (attrs.special) {
    classes.push('btn-special')
  }
  
  return classes
})
</script>

<style scoped>
/* 基础按钮样式 */
.base-btn {
  padding: 8px 16px;
  border: none;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.3s ease;
}

/* 不同类型按钮的样式 */
.btn-primary {
  background-color: #42b983;
  color: white;
}

.btn-danger {
  background-color: #ff4444;
  color: white;
}

.btn-warning {
  background-color: #ffbb33;
  color: black;
}

/* 不同尺寸按钮的样式 */
.btn-small {
  padding: 4px 8px;
  font-size: 12px;
}

.btn-large {
  padding: 12px 24px;
  font-size: 16px;
}

/* 圆角样式 */
.btn-round {
  border-radius: 20px;
}

/* 特殊样式 */
.btn-special {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* 鼠标悬停效果 */
.base-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}
</style>

<template>
  <div class="button-group">
    <!-- 基础按钮 -->
    <CustomButton>基础按钮</CustomButton>
    
    <!-- 主要按钮（带类型） -->
    <CustomButton type="primary">主要按钮</CustomButton>
    
    <!-- 危险按钮（带类型和尺寸） -->
    <CustomButton type="danger" size="large">危险按钮</CustomButton>
    
    <!-- 警告按钮（带类型、尺寸和圆角） -->
    <CustomButton type="warning" size="small" round>警告按钮</CustomButton>
    
    <!-- 特殊按钮（带自定义属性） -->
    <CustomButton special title="这是一个特殊按钮">特殊按钮</CustomButton>
    
    <!-- 禁用状态按钮（透传原生属性） -->
    <CustomButton type="primary" disabled>禁用按钮</CustomButton>
  </div>
</template>

<script setup>
import CustomButton from './CustomButton.vue'
</script>

<style scoped>
.button-group {
  display: flex;
  gap: 10px;
  padding: 20px;
  flex-wrap: wrap;
}
</style>