快捷導(dǎo)航

vue中Props與Attrs的實現(xiàn)實例

更新時間：2025年09月11日 09:37:17 作者：拉不動的豬

本文主要介紹了vue中Props與Attrs的實現(xiàn)實例,文中通過示例代碼介紹的非常詳細,對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

基本功能

props常用來數(shù)據(jù)通信
attars所有非props屬性的透穿

props傳值:

基本傳值‌

<!-- 父組件 -->
<ChildComponent title="歡迎頁面" />

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

動態(tài)綁定‌

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

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

類型驗證‌

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

默認值設(shè)置‌

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

對象形式傳值‌

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

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

attars屬性透穿

屬性透穿的主要特點既然是接受非props以外的屬性，前端可以主動接受某些特定的屬性，也可以不接受這些屬性。

實際應(yīng)用場景如下：

組件的二次封裝，比如常見的按鈕：

子組件

<template>
  <!-- 按鈕組件，使用動態(tài)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()

// 根據(jù)透傳的屬性計算樣式類
const computedClasses = computed(() => {
  const classes = []
  
  // 如果透傳了type屬性，添加對應(yīng)的樣式類
  if (attrs.type) {
    classes.push(`btn-${attrs.type}`)
  }
  
  // 如果透傳了size屬性，添加對應(yīng)的樣式類
  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>
/* 基礎(chǔ)按鈕樣式 */
.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;
}

/* 鼠標(biāo)懸停效果 */
.base-btn:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}
</style>

父組件

<template>
  <div class="button-group">
    <!-- 基礎(chǔ)按鈕 -->
    <CustomButton>基礎(chǔ)按鈕</CustomButton>
    
    <!-- 主要按鈕（帶類型） -->
    <CustomButton type="primary">主要按鈕</CustomButton>
    
    <!-- 危險按鈕（帶類型和尺寸） -->
    <CustomButton type="danger" size="large">危險按鈕</CustomButton>
    
    <!-- 警告按鈕（帶類型、尺寸和圓角） -->
    <CustomButton type="warning" size="small" round>警告按鈕</CustomButton>
    
    <!-- 特殊按鈕（帶自定義屬性） -->
    <CustomButton special title="這是一個特殊按鈕">特殊按鈕</CustomButton>
    
    <!-- 禁用狀態(tài)按鈕（透傳原生屬性） -->
    <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>

到此這篇關(guān)于vue中Props與Attrs的實現(xiàn)實例的文章就介紹到這了,更多相關(guān)vue Props Attrs內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: