全立体网站建设,动漫制作专业好吗,全网商机app招标,象山县建设局网站Vue-props配置功能
props概述
功能#xff1a;接收从其他组件传过来的数据#xff0c;将数据从静态转为动态注意#xff1a; 同一层组件不能使用props#xff0c;必须是父组件传子组件的形式。父组件传数据#xff0c;子组件接收数据。不能什么数据都接收#xff0c;可…Vue-props配置功能
props概述
功能接收从其他组件传过来的数据将数据从静态转为动态注意 同一层组件不能使用props必须是父组件传子组件的形式。父组件传数据子组件接收数据。不能什么数据都接收可能会出现一些奇怪的bugprops接收过来的数据不要修改页面渲染可能没有问题但控制台会报错而且不符合规范
props的三种接收方法
第一种数组形式常用
props:[a, b]第二种类型限制
props : { a : String b : Number
}第三种类型限制必要性限制默认值
props : { a : {// type:类型可以是数字字符串等type : Number, // requiredtrue 或者 false// 设置为true视为a必须存在必填项没有a则控制台报错// 默认情况为false required : true }, b : { type : Number, // default默认值// 在添加默认值之前该字段接收的数据已经有数值时则默认值无效default : 10 }
}传数据的形式传数据的形式可对应任意一种接受数据的方法
在标签内传数据
// 父组件
Info name张三 :age12/Info// 子组件
props : [name, age]在data(){}中传数据
// 父组件
Info :listlist/Info
data() {return {list : [{id:001, name:zhangsan, age:10},{id:002, name:lisi, age:20}]}
}// 子组件
props : [list]在methods : {}中传数据
// 父组件
Info :listlist/Info
method : {list(){......}
}// 子组件
props : [list]注传数据的形式有很多不局限以上用法也可以在computed : {}中传数据等
怎么用
父组件传数据子组件接收数据父组件App.vue
templatedivh1{{msg}}/h1// 当出现第二 或 第三种带有限定类型的props时要注意接受的数据是否符合类型限制// 不符合类型限制但又不想修改类型例如age12可采用v-bind:// v-bind:简写形式 :等号后面可以是常量或字符串等Info name张三 :age12/Info/div
/templatescriptimport Info from ./components/Info.vueexport default {name : App,data() {return {msg : 个人信息}},components : {Info}}
/script子组件Info.vue
templatedivh3姓名{{name}}/h3h3年龄{{age}}/h3/div
/templatescript
export default {name : Info,data() {return {name: this.name}},// 数组形式常用props : [name,age]// 带有类型限定props : { name : String age : Number }// 类型限制必要性限制默认值props : { name : {type : Number, required : true },age : { type : Number, default : 10 }}
}
/scripttype : Number, required : true },age : { type : Number, default : 10 }}
}
/script
