vue组件间数据传递—props

关于props，老套路，看下官网的解释：

props可以是数组或对象，用于接收父组件的数据。。。

之所以父组件的数据需要通过props传到子组件中，因为组件实例的作用域是孤立的，子组件模板不可能直接引用父组件数据。。。（也就是说子组件不能在模板中渲染父组件中的数据）

上边代码，子组件"son-component"引用了父组件（根实例）的name数据，在自定义标签上，name是父组件中的数据，前边alias是自定义的名字，子组件也是通过自定义名字来接受父组件传来的值。

 

porp类型

数组：可以传多个数据

props:["title","name","age", ··· ]

对象：可以指定props中的每一个值的类型

props:{
    title:String,//title必须是字符串类型
    name:String,//name必须是字符串类型
    age:Number,//age必须是数字类型
    callback:Function//callback必须是函数
}

prop验证

我们可以为props中的值提供一个带有验证需求的对象，而不是字符串数组。

这一点在开发中经常会用到，基于vue封装一些组件库时尤为重要。

大致分为5种情况：

Vue.component("myComponent",{
   props:{
      //基础类型的检查
	 param1:Number,
     //字符串或数字都行
	 param2:[String,Number],
	 //param3必须要填写，而且要是字符串类型的才行
	 param3:{
		type:String,
		require:true
	 },
     //如果param4没有传的话，默认值是100
	 param4:{
		type:Number,
		default:100
	 },
     //自定义校验函数(value是传递过来的参数，且必须是数组中的某一个)
	 param5:{
		validator(value){
		   return ["hehe","haha","heihei"].indexOf(value) !== -1
		}
	 },
     //如果参数是一个数组 或者对象 ，默认值必须从工厂函数中获取
	 param6:{
		default(){
		  return {width:"100px",height:"30px",backgroundColor:red}
		}
	 }

   }
})

当验证失败时，Vue会产生一个控制台警告。

类型检查中的type可以是：String、Number、Boolean、Array、Object、Date、Function、Symbol。

 

在这里我们说几个值得注意的地方：

1、子组件中不可以更改来自父组件的数据。

这里Vue会报错。

如果你非要修改，有两种方法，相信大家从上边vue报错中也能发现，官方给提供了这2种方法：（分情况而定，根据不同需求来）

一、在data中，可在子组件data数据对象中把父组件数据保存，这样会有一个问题，父组件数据更改，子组件中的props里边的数据会更新，但是子组件模板中的数据不会更新！

let sonComponent = {
	props: ["num"],
	data() {
		return {
		  changeNum: this.num//把数据线存到changeNum中，更改changeNum
		};
	},
	template: `{{changeNum}}`,
	methods: {
		changeData() {
		   this.changeNum = 30;
		}
	}
};

二、在计算属性中：

2、子组件中更改来自父组件对象形式的数据，父组件数据也会跟着更改，因为对象或数组都是引用类型的，当一个对象赋给一个变量时，这个变量只是引用的对象地址。

结果显示：父组件中的name属性也改变了。。。

以上是vue中props用法，有不足的地方，希望指正，以后我会随时更新。。。

 

补充：

一个小例子：

一个button按钮组件：

子组件用props接受来自父组件的数据

渲染结果：