VUE之Props传值参数

总结一下VUE关于Props的传值

1、定义

  • 用于父组件对子组件之间的值传递,属于单向传递(父组件->子组件),不可逆。
  • 如果对父组件传递过来的值进行赋值,会报错,子组件如想返回父组件传递值,可以用emit。

2、用途

如定义,就是父组件->子组件的值传递。

3、语法糖

父组件:

1
2
3
4
5
<excel-merge-opr
:show="mergeDialogStatus"
:list="selectList"
@close-file-merge="closeFileMerge"
/>

子组件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
props: {
show: {
type: Boolean,
require: true,
default: false,
validator(value) {
return [true, false].includes(value)
}
},
list: {
type: Array,
require: true,
default: function() {}
}
}
  • type
    数据类型,也就是JS的数据类型:
    String
    Number
    Boolean
    Array
    Object
    Date
    Function
    Symbol

  • require
    是否必须传入,可选值:true false

  • default
    默认值

  • validator
    传入值校验

4、学习参考

官网API:https://v3.cn.vuejs.org/guide/component-props.html#prop-%E7%B1%BB%E5%9E%8B


VUE之Props传值参数
http://pygo2.top/articles/52857/
作者
mingliang.gao
发布于
2022年4月18日
许可协议