props 组件传值

最新推荐文章于 2023-06-01 10:41:28 发布

Jookerone

最新推荐文章于 2023-06-01 10:41:28 发布

阅读量533

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_45178972/article/details/117197413

版权

Vue 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

本文介绍了Vue中父子组件间传递props的方式，包括对象形式和字符串形式，并讲解了如何设置props验证、默认值以及非prop属性的处理。在属性传递过程中，如果子组件不接收某个prop，该值会默认附加到最外层DOM，但通过设置`inheritAttrs: false`可以避免这一行为。同时，`this.$attrs`可以在子组件的mounted阶段获取所有传递的props。

摘要由CSDN通过智能技术生成

props:[“message”]
或者props:{
message:{
type:String,
required:true,
validator(value){ //效验传递过来的值，true为通过
return value <100
}
default:’’,//default也可以是个函数default(){return xxx;} 默认值就是函数返回的值

}

当要传递的props值很多时

子组件demo
props:{
   a:{
      type:Number
    },
    b:{
      type:String
    },
    c:{
      type:Boolean
    }
  }
 }
父组件
data() {
  return {
    params:{
      a:1,b:"ok",c:true
    }
 }
 <div id="root">
    <demo v-bind="params"></demo>
  </div>