vue中组件的props属性

今天这篇文章&＃xff0c;让你彻底学会props属性……

props主要用于组件的传值&＃xff0c;他的工作就是为了接收外面传过来的数据&＃xff0c;与data、el、ref是一个级别的配置项。

问题一&＃xff1a;那props具体是怎么使用呢&＃xff1f;原理又是什么呢&＃xff1f;往下看
1、【定义被调用组件】首先&＃xff0c;我们先定义一个person组件&＃xff0c;用于显示个人信息的组件&＃xff0c;我们放了一个人的姓名&＃xff0c;性别&＃xff0c;以及年龄&＃xff0c;定义好这个组件之后&＃xff0c;就可以等待其他组件进行调用。那么既然别的组件可以调用&＃xff0c;我们就需要再定义一个props属性&＃xff0c;用于接收别的组件传进来的值。

 注意&＃xff1a;组件中name、sex、age都是一个prop&＃xff0c;将三个属性放到一起&＃xff0c;就是props&＃xff0c;这就是props的由来&＃xff0c;是prop的复数形式&＃xff0c;代表多个prop属性的集合。

 2、【调用组件】此时我们再定义一个info组件&＃xff0c;用于展示这个人的基本信息&＃xff0c;进行对person组价的调用实现信息的展示&＃xff0c;分为下图四个步骤进行调用。并传入参数

我们只需要在age前面加上冒号 &＃xff1a;他就会只识别双引号里面的东西18 &＃xff0c;否则识别的是双引号18

问题六&＃xff1a;必须要修改props属性值&＃xff0c;怎么办&＃xff1f;
 答&＃xff1a;通过data去间接修改

我们在data里面重新定义一个变量去接收props属性。这个变量最好不要重名&＃xff0c;重名的话&＃xff0c;优先获取props属性值&＃xff0c;优先级props>data。然后我们在操作或者html绑定值的时候&＃xff0c;都去操作data里面新定义的变量