网站链接: 我爱捣鼓
当前位置: 首页 > 前端开发 > Vue

vue props对象如何设置默认值?

2023/2/19 16:48:15

我们在说vue props对象如何设置默认值的问题前,先来说说vue中props的基本作用。props的作用1.静态props 静态即传入的值不变化,直接在父组件中定义,子组件中使用2.动态props 动态即传入的值会变化,父组件中要动态地绑定父组件的数据。3.props验证 …

        我们在说vue props对象如何设置默认值的问题前,先来说说vue中props的基本作用。

  • props的作用

1.静态props

        静态即传入的值不变化,直接在父组件中定义,子组件中使用

2.动态props

        动态即传入的值会变化,父组件中要动态地绑定父组件的数据。

3.props验证

        验证传入的props参数的数据规格,如果不符合数据规格则发出警告,注意这个数据类型包含所有的数据类型,如基本类型和引用类型;

        还可以在验证中加入自定义验证函数,当返回false时则发出警告

3.单向数据流: props是单向绑定的

        一般来说,当父组件的属性变化时,将传导给子组件,但是反过来不会。每次父组件更新时,子组件的所有 prop 都会更新为最新值。

        下面我们具体来看看vue props对象如何设置默认值?

 // 写法一:常规写法
props:['value']
 //写法二:带有类型写法
props: {
  fieldString: String,
  fieldNumber: Number,
  fieldBoolean: Boolean,
  fieldArray: Array,
  fieldObject: Object,
  fieldFunction: Function
}
// 写法三:带有类型和默认值写法
  props: {
    fieldString: {
      type: String,
      default: ''
    },
    fieldNumber: {
      type: Number,
      default: 0
    },
    fieldBoolean: {
      type: Boolean,
      default: true
    },
    fieldArray: {
      type: Array,
      default: () => []
    },
    fieldObject: {
      type: Object,
      default: () => ({})
    },
    fieldFunction: {
      type: Function,
      default: function () { }
    }
  }

        通过以上内容我们知道了vue props对象如何设置默认值?。感谢您访问“我爱捣鼓(www.woaidaogu.com)”网站的内容,希望对大家有所帮助!引用本文内容时,请注明出处!谢谢合作!

相关资讯

  • vue兄弟平级组件如何传递参数值?

    vue组件传值不外乎三种,父传子、子传父、平级,今天我们就来着重说说vue平级组件如何传递参数值? 假设你有两个Vue组件需要通信: A 和 B ,A组件按钮上面绑定了点击事件,发送一则消息,B组件接收。初始化,全局创建$bus 直接在项目中的 main.js 初始化 …

    2023/1/7 13:08:32