vue中Props与Attrs的实现实例
作者：拉不动的猪
本文主要介绍了vue中Props与Attrs的实现实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
基本功能
- props常用来数据通信
- attars所有非props属性的透穿
props传值:
基本传值
<!-- 父组件 -->
<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" />
attars属性透穿
属性透穿的主要特点既然是接受非props以外的属性，前端可以主动接受某些特定的属性，也可以不接受这些属性。
实际应用场景如下：
组件的二次封装，比如常见的按钮：
子组件
<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>
到此这篇关于vue中Props与Attrs的实现实例的文章就介绍到这了,更多相关vue Props Attrs内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！