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

目录

基本概念

代码解析

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

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

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

---

基本概念

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

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

• 注意事项：

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

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

代码解析

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

传递参数：

 <Student name="李四" :age="19" />
 在组件标签中传递参数即可

接收参数：

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

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

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

<template> 
    <Student name="李四" :age="19"/>//向子组件传递参数 
</template>

<script>
import Student from "./Student.vue";

export default {
  name: "School",
  components: {
    Student}
};
</script>

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

<template>
  <div>
    <p>学生姓名：{{ name }}</p>
    <p>学生年龄：{{ age }}</p>
  </div>
</template>

<script>
export default {
  name: "Student",
 
  得到参数即可使用，但不可修改！三种方式任选其一
1. 第一种方式（只接收）： props: ["name", "age"],
2. 第二种方式（限制类型）：props:{name:String，age:Number}
3. 第三种方式（限制类型、限制必要性、指定默认值）：    
     props: {
    name: {
      type: String, //类型
      required: true, //必要性
      default: "张三", //默认值
    },
    age: {
      type: Number, //类型
      required: true, //必要性
      default: 18, //默认值
    },
  },
};
</script> 

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

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

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

<template>
  
    <Student :getStudentMessag="getStudentMessag" />
 
</template>

<script>
import Student from "./Student.vue";
export default {
  name: "School",
  components: {
    Student,
  },
  methods: {
    getStudentMessag(name, age) {
      console.log("我是APP组件");
      console.log("school收到了student的名字", name);
      console.log("school收到了student的年龄", age);
    },
  }
 
};
</script>

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

<template>
  <div>
    <p>学生姓名：{{ name }}</p>
    <p>学生年龄：{{ age }}</p>

    <button @click="sendStudent">点我传递学生信息</button>

  </div>
</template>

<script>

export default {
  name: "Student",
  data() {
    return {
      name: "张三",
      age: 18,
    };
  },
  props: ["getStudentMessag"],
  methods: {
    sendStudent() {
      this.getStudentMessag(this.name, this.age);
    },
  },
 
}；

</script>