Vue CLI 系列之（四）props配置项

props配置项

对于一个新功能，结构、交互、样式都与已有的组件一样，唯独数据不一样

也就是说数据是从外部带给组件的，数据是动态获取的，这也是一种组件的复用

1. 功能：让组件接收外部传过来的数据/方法

2. 传递数据：<Demo name="xxx"/>

   传值时可通过v-bind指令【简写为:】传递不同数据类型的值，否则就只能传递字符串类型的值

   传递的值是存在Demo组件【子组件】的实例对象身上的

3. props接收数据的三种方式：

   1. 第一种方式（简单声明接收）：props:['name'] 【声明顺序与传值顺序不要求一致】

   2. 第二种方式（限制类型）：props:{name:String}

      ​ key是声明接收的元素名，value是js中已经存在的内置构造函数（String、Number...），【接收的同时对数据进行类型限制，当传值类型与限制类型不符时，正常接收数据，给出警告】

   3. 第三种方式（限制类型、限制必要性、指定默认值）：

      ​ 如果指定了属性的required为true，但是没有传值，会进行警告，同时未传值的属性值为undefined【接收的同时对数据进行：类型限制+默认值的指定+必要性的限制】

      props:{
      	name:{
      	type:String, //类型
          // 一般情况下required和default仅指定一个【三个属性是可以同时指定的】
      	required:true, //必要性
      	default:'老王' //默认值
      	}
      }
      

4. 注：

   （1）props中配置的属性会出现在组件实例对象身上，但不会出现在_data中

   （2）vc身上会显示data中的属性和props声明接收的属性，二者不容易区分，通过Vue Devtools可以非常容易分开

   （3）只要是组件实例对象身上有的属性和方法，模板中都可以直接使用

   （4）props中不要配置一定不会传值的属性，否则接收不到值就是undefined，没有意义

   （5）props接收到的属性值不要在组件中进行修改，如果非要修改，可以修改成功，但会报警告，因为Vue不建议这么做

   （6）如果组件的data中有了变量name，props中也声明了要接收name，props优先级更高【最终生效的是data中的】

   （7）组件的props中的属性会优先于data放到vc身上，所以data中可以直接引用props接收的属性的值

   （8）定义props中声明接收的属性时，不要声明一些Vue保留的属性名，比如key、ref等

   （9）通过props可以传递方法，方法需要定义在methods中，比如在A组件中定义了方法add，通过props传递给了B组件，实际传递的就是add方法的引用，add方法的定义是在A组件中的，B组件中触发add方法的调用时，真正执行的是A组件中的方法add，B组件中调用add方法传递的参数A组件中的方法也是能够接收到的，通过方法的参数实现了B组件向A组件中传递数据的功能

   备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请在data中定义一个中间变量接收props中的某个属性，然后去修改data中的中间变量，当然，组件中模板引用的也必须是data中的中间变量。