用sql2000做网站,网站开发私活,wordpress是一种,深圳成交型网站建设公司defineProps 属性#xff1a;用于接收父组件传递过来的数据。
注意#xff1a;如果 defineProps 接收的参数名#xff0c;和已有变量名相同#xff0c;就会造成命名冲突。
语法格式#xff1a;
// 无限制
const props defineProps([参数名, 参数名]);// 限制数据类型
…defineProps 属性用于接收父组件传递过来的数据。
注意如果 defineProps 接收的参数名和已有变量名相同就会造成命名冲突。
语法格式
// 无限制
const props defineProps([参数名, 参数名]);// 限制数据类型
const props defineProps({参数名: String,参数名: Number,
});// 限制数据类型、默认值、必填项
const props defineProps({参数名: { type: String, required: true },参数名: { type: Number, required: true },参数名: { type: String, default: 默认值 },
});数组写法【无限制】
一、父组件通过自定义属性传递参数。
templateh3我是父组件/h3hr /!-- 通过自定义属性传递 name 和 age --Child :nameinfo.name :ageinfo.age/Child
/templatescript setup
// 引入组件
import Child from ../components/Child;
import { reactive } from vue;
let info reactive({ name: 张三, age: 18 });
/script注Vue 不允许使用 key、ref 等关键字作为属性名。
二、子组件使用 defineProps 接收数据。
templateh3我是子組件/h3p{{ name }} : {{ age }}/p
/templatescript setup
// 接收父组件传递的数据
const props defineProps([name, age]);
/script注defineProps 不需要引入可以直接使用。
三、最终效果。 原创作者吴小糖
创作时间2023.12.6
