vue知识点--组件传参

一、vue组件间传参

父子组件的关系可以总结为 prop 向下传递，事件向上传递。父组件通过 prop 给子组件下发数据，子组件通过事件给父组件发送消息，如下图所示： 

 

二、父传子(自定义属性 props)

1.父传子主要通过props来实现 

原理：

父组件通过import引入子组件并注册，在子组件的标签上添加要传递的属性，子组件通过props接收。

接收有两种形式，一是通过数组形式[‘要接收的属性’]，二是通过对象形式{}来接收，对象形式可以设置要传递的数据和默认值，而数组只是简单的接收，是只读的，不能进行修改。

2.运用

• 父组件代码   渲染子组件

• 子组件代码接收父组件。可以传多个属性。

//子组件代码接收父组件		
//props接收父App.vue传参 num 
		// props:["num"],
		props:{
			//定义传递过来的参数是数字列席，默认值是1
			"num":{type:Number,default:1},
			//Number数字，String字符串，Boolen布尔值
			//Array数组，Object对象 -引用类型
			//引用类型的默认值使用函数返回值 default(){return:[]}
		},
		data(){
			//使用num：把传过来的num赋值给counter
			return{counter:this.num}
		}

子组件接受的父组件的值分为引用类型和普通类型两种：

普通类型：字符串（String）、数字（Number）、布尔值（Boolean）、空（Null）
引用类型：数组（Array）、对象（Object）引用类型的默认值使用函数返回值 default(){return:[ ]}

三、子传父 (自定义事件 this.$emit)

原理：

子组件向父组件传数据使用自定义事件， vue 组件提供了一个emit(‘自定义事件名’， 传递的数据) )，子组件传递数据时，触发响应的事件函数，就会自动触发通过$emit给父组件绑定的自定义事件，自定义事件接受一个参数，参数就是子组件传递过来的数据。

•  子组件绑定一个事件，通过 this.$emit() 来触发。在子组件中绑定一个事件，并给这个事件定义一个函数

•  在父组件中定义并绑定 CountChange 事件