2026/6/6 17:27:44
网站建设
项目流程
网站支付宝接口付费,腾讯企业邮箱经销商,公司官网设计模板,wordpress 显示标签代码为什么有不同的写法#xff1f;这是 Vue 的设计约定#xff1a;基本类型#xff08;String, Number, Boolean#xff09;#xff1a;直接写默认值引用类型#xff08;Object, Array, Function#xff09;#xff1a;必须用工厂函数返回默认值为什么引用类型要用函数这是 Vue 的设计约定基本类型String, Number, Boolean直接写默认值引用类型Object, Array, Function必须用工厂函数返回默认值为什么引用类型要用函数因为如果直接写对象所有组件实例会共享同一个对象引用修改一个会影响所有组件用函数每次返回一个新对象就不会互相影响了。完整示例template div classprops-demo h2defineProps Default 写法示例/h2 p姓名: {{ name }}/p p年龄: {{ age }}/p p是否激活: {{ isActive }}/p p用户信息: {{ userInfo.nickname }} - {{ userInfo.level }}/p p标签列表: {{ tags.join(, ) }}/p p格式化金额: {{ formatPrice(100) }}/p /div /template script setup // // defineProps 的 default 写法详解 // const props defineProps({ // 基本类型直接写默认值 // String 类型 name: { type: String, default: 游客 // ✅ 直接写字符串 }, // Number 类型 age: { type: Number, default: 18 // ✅ 直接写数字 }, // Boolean 类型 isActive: { type: Boolean, default: false // ✅ 直接写布尔值 }, // 引用类型必须用工厂函数 // Object 类型 - 必须用函数返回 userInfo: { type: Object, // ❌ 错误写法default: { nickname: 匿名, level: 1 } // ✅ 正确写法用函数返回对象 default: () ({ nickname: 匿名, level: 1 }) // 或者写成 // default() { // return { nickname: 匿名, level: 1 } // } }, // Array 类型 - 必须用函数返回 tags: { type: Array, // ❌ 错误写法default: [默认标签] // ✅ 正确写法 default: () [默认标签] }, // Function 类型 - 比较特殊 formatPrice: { type: Function, // 函数类型的默认值直接写函数即可 default: (price) ¥${price.toFixed(2)} } }) // 使用 props console.log(props.name, props.age) /script总结基本类型string、number、Boolean直接写值default默认文字default0defaultfalse引用类型Object、Array用工厂函数default: ( ) ({key: value })default: ( ) [item1,item2]