怎么做网站访问被拒绝,做电商网站注意什么,sae wordpress 3.9,长春网站只长春网站制作做Vue23-props配置功能
Vue2-props配置
功能#xff1a;接收从其他组件传过来的数据#xff0c;将数据从静态转为动态注意#xff1a; 同一层组件不能使用props#xff0c;必须是父组件传子组件的形式。父组件传数据#xff0c;子组件接收数据。不能什么数据都接收3-props配置功能
Vue2-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 }}
}
/scriptVue3-props配置
props的配置在Vue2和Vue3上基本相同这里主要说明如何用setup调用props的接受数据
setup如何调用props 在setup函数中是没有this关键字的所以在代用setup函数之前会先给setup传递一个参数propsprops参数在setup中被包装成一个代理对象同样具有响应式处理能力
// App.vue
templateUser namejack :ageage/User
/templatescriptimport { ref } from vueimport Info from ./components/Info.vueexport default {name : App,components : {Info},setup(){let age ref(20)return{age}}}
/script// Info.vue
templateh2姓名{{name}}/h2h2年龄{{age}}/h2
/templatescriptexport default {name : Info,// Vue3的props依旧是Vue2的接收方式没变props : [name, age],// setup参数名可以随意没要求setup(props){console.log(props.name);console.log(props.age);}}
/script
