vue props配置对象

要点：

 

先创建一个Student子组件

并且之前说过,当写重复的组件，它们的数据不是同步的,因为extend 进行了一个new Vue Component()构造函数 每次应用组件标签生成的都是一个新的组件实例对象,

 

而现在有个新的需求,比如上边,属性是张三 男 18 但是需要一个组件只改变它的数据值.让它显示为李四 女 20,这时貌似如果直接再定义一个组件,只把数据改了,这样也并不是复用.

可以想到,可以用动态的把数据传入,让一个组件的数据发生改变

解决办法：

1.要动态传入的数据一定不要写再data配置对象上！！！

在app组件上,外部进行数据的传入,直接写在组件标签的属性上,但是这样还不行,会报错

 

要在Student组件上写接受的东西

类似与微信转账,发钱人发钱,钱不会直接转入收钱人的钱包,需要收钱人点收款才行,这与这边还要在Student组件里写东西同理

在Student组件的props有三种写法

数组简单法：

 

这边数组元素的顺序不需要和App组件上在组件标签属性上写的属性,顺序一致

 

页面运行成功

这样就实现了组件在复用时是动态的

 

 

但是如果我们现在要实现一个需求,就是传入的是18但是页面显示的要19,也就是需要组件里面的一个数据加工

在插值语句上写上+1

 但是发现页面输出的和我们预想的不一样

 原因：

这边props把对应的数据,会存放到vue component里,

发现在vue component 上有这些数据,其中msg是data 弄出来的,而其他则是props出来的

 

所以_data里面只有msg,因为它是内部的,而其他数据是外部传过来的

 

 

 

刚才18 没有变成19 是因为你把它写成了字符串形式了

 但是如果写成  发现它报错了

这样写编译不了

因为为vue形式破坏掉了,都是key=""所以这边只能加引号 

 

 解决办法1：

在student组件上,加入强制类型转换

 

 解决方法2：推荐

 

在age前面加一个:

 

 如果不加:就表达了给age传入一个字符串

 

不会对里面的内容进行运行

 

但是加了:就是个表达式,会对里面的内容进行计算

 

 

 

 props对象简单配置写法：

 

这样写的话,如果你传入数据类型不对就会进行报错,虽然页面没有差异

 

age为数组类型加上:解决问题了

问题解决

 

 设置为有默认值的，则不传

 

则99+1

 

 

  props对象详细配置写法

一般来说,required:true 和default不会一起写

因为required:true 表示你必须要传,你必须要传一个数据的值 那也就不需要写这个数据的默认值了

 

运行正常

 

 

如果不传名字：

就会报错

prop和props

prop是这边传入的sex  

 而props用于接受里面有很多属性

一般来说 简单的数组声明会写的多 不要对一些,数值型数据忘加:

注意点：

（1）这边声明不要瞎声明,如果没有传入那没有对应的prop,虽然phone有,但是也是undefined

 

（2）接受到的props是不能改的因为它是外部传过来的

验证：写一个点击事件,修改age

点击发现报错

 但是页面上的数值也改了

但我们最好不要修改props接受到的值,因为会引起vue一些奇奇怪怪的问题

 

如果外部传入数据到组件,并且要一定要修改这props的值

解决办法;

先我们看如果在props上面写了一个name 然后data里面也写了一个name

发现报错,因为,props写的name会被放到vue component里,而data里写的name也会被放入vue component里,就不合理了,也就是说,data里写张三已经不奏效了,以外部传进来的为主,也就是此时

props的优先级是高于data的

 

 

所以我们可以这样写,因为props优先级高,也就是props的age是最先被接受放到vue component上的,所以之后我们data里自然而然就可以读到这个age

所以以后可以这样写

通过data再定义一个与props不同名的属性读取到props传入的age值,然后对这个data的属性进行操作就行了！！！

 

 （3）并且命名不用命名vue已经征用的名字

比如写个key

 

报错：key'已经被征用了不能被使用作为一个组件的prop

 

 总结：