props配置对象

是一个父组件给子组件传递数据的作用。

比如一个父组件使用多个子组件,但是每个子组件里面的数据是不一样的,那么就不能在子组件里给数据写死了,因此可以父组件给子组件传递变量名,比如name,age这些,

方法一:然后子组件通过props这个配置项进行接受,props:["name","age"],然后子组件中使用父组件传过来的{{name}}.父组件在使用子组件的时候可以给每个子组件自行添加不同的数据 name="a" age=“b”  提醒:age因为是数值型,但这种传递只会转成字符串,因此在age前面加上:绑定,可以解决,因为“绑定可以对分号里面当成一个表达式计算.

方法二:如果你想对子组件收到的数据进行类型限制的话,可以在props加上条件对其进行类型限制,如props:[name:String,age:Number],如果收到的不是该类型就会报错提醒。

方法三:还有一种传法,就是props{}里面还是对象,如name:{type:String,required:true}表示限制类型,且必须传 age:{type:Number, defalt:99} 表示限制类型,可传可不传,如果不传,就是默认值为99

注意:props是不要去修改,如果要去修改,则自己创建一个data数据如MyName:this.name,然后再去修改

props优先级更高一些

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue2中,可以使用以下方式来配置props: 1. 在父组件中给子组件标签元素设置自定义属性,使用v-bind或者简写的冒号语法,例如:`:prop-name="XXX"`或者`:propName="XXX"`。这样就可以将数据传递给子组件。 2. 在子组件中通过props选项接收数据,可以使用数组语法或者对象语法。例如,如果有一个名为post的对象,可以使用以下两种写法来传递数据给子组件: - `<BlogPost v-bind="post" />` - `<BlogPost :id="post.id" :title="post.title" />` 3. 对于数组类型的props,可以使用箭头函数来定义默认值。例如: ``` props: { demoArr: { type: Array, default: () => [], }, } ``` 4. 对于函数类型的props,可以使用箭头函数来定义默认值。例如: ``` props: { demoFun: { type: Function, default: () => {}, }, } ``` 请注意,以上是Vue2中正确的props配置方式。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [【Vue2】组件通信 之 props](https://blog.csdn.net/Superman_H/article/details/125819343)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* *3* [Vue子组件内的props对象参数配置](https://blog.csdn.net/weixin_58099903/article/details/126428326)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值