vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue props传递的类型写法

Vue props传递的类型和写法分享

作者:D_jing20

这篇文章主要介绍了Vue props传递的类型和写法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教

Vue props传递的类型和写法

props常用属性

类型检查(规定数据类型)

类型检查(规定数据类型)typeString 字符串
Number 数字
Boolean 布尔
Array 数组
Object 对象
Date 日期
Function 函数
Symbol 独一无二的值(es6)
默认值defaultdefault : (默认值),基础数据类型: 直接赋值,对象数据类型: 用函数赋值 ()=>[]
必填项requiredrequired: (必填项) ,默认为false,说明父级必须传入,否则会报错
校验validator验证传入的值是否符合规定

props语法

props: {
    prop1: [Boolean, Number], // 多个类型
    prop2: {
      type: Number, // 数字
      default: 100 // 默认值
    },
    prop3: {
      type: Boolean, // 布尔
      required: true // 必填
    },
    prop4: {
      type: String, // 字符串
      required: true
    },
    prop5: {
      type: Array, // 数组 // 对象或数组默认值必须从一个工厂函数获取
      default: () => []
    },
    prop6: {
      type: Object, // 对象 // 对象或数组默认值必须从一个工厂函数获取
      default: function () {
        return { msg: 'hello' }
      }
    },
    prop7: {
      type: String,
      validator: function (t) { // 自定义验证函数
        return t === 'fade' || t === 'slide' // 这个值必须匹配下列字符串中的一个
      },
      defalut:'slide'
    }
  }

Vue props 传递函数

Props的type是函数

通过 props 传递 函数 看看有啥用。

// 父组件

</template>
 <div>
    <children :add='childrenClick'></children>
    <p>{{countF}}</p>
  </div>
</template>

<script>
import children from './Children'
export default {
  name: 'HelloWorld',
  data() {
    return {
      countF: 0,
    }
  },
  methods: {
    childrenClick(c){
     this.countF += c;
    }
  },
  components:{
    children,
  }
}
</script>

// 子组件
<template>
    <div>
        <button @click="handClick(count)">点击加 1 </button>
    </div>
</template>
<script>
export default {
    data() {
        return {
            count:1,
        }
    },
    props:{
        add:{
            type: Function
        }
    },
    methods: {
        handClick(){
            this.add( ++this.count); // 父组件方法
        }
    },
}

结果

可以看到 chirden 组件在中 使用 props.add() , 调用的是 父组件的方法。

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

您可能感兴趣的文章:
阅读全文