Vue 中那些混乱参数传递——props子组件与父组件相互传递参数

目录

基本概念

代码解析

传递数据与接收数据基本语法

通信：父组件 ==> 子组件  

通信：子组件 ==> 父组件

---

基本概念

• 功能：让组件接收外部传输的数据

• props适用于:
      (1).父组件==>子组件通信
      (2).子组件==>父组件通信(要求父先给子一个函数)

• 注意事项：

  （1）props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告；

  （2）若需要修改：复制props的内容到data中一份， 然后去修改data中的数据。

代码解析

传递数据与接收数据基本语法

传递参数：

 
 在组件标签中传递参数即可

接收参数：

1. 第一种方式（只接收）：props:['name'] 
2. 第二种方式（限制类型）：props:{name:String}
3. 第三种方式（限制类型、限制必要性、指定默认值）：    
    props:{
    	name:{
    	type:String, //类型
    	required:true, //必要性
    	default:'老王' //默认值
    	}  }

通信：父组件 ==> 子组件  

父组件School  ：传递 name值 和 age值 给子组件

子组件Student ：接收参数在组件实例对象上  直接调用即可  不可修改

通信：子组件 ==> 父组件

父组件先给子组件一个函数，通过props的方式传递。子组件使用组件实例对象传递参数即可

 父组件School  ：传递 getStudentMessag 一个函数类型的属性值

 子组件Student ：接收getStudentMessag参数在组件实例对象上，在适当的地方利用this传递 参数调用 即可调用即可；调用之后父组件即可接收到传递的参数。