vue-props配置项

1. 功能：让组件接收外部传过来的数据
2. 传递数据：<Demo name="xxx"/>
3. 接收数据：

   1. 第一种方式（只接收）：props:['name']

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

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

      props:{
      	name:{
      	type:String, //类型
      	required:true, //必要性
      	default:'老王' //默认值
      	}
      }
      

   备注：props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中的数据。

<template>
  <div>
    <h1>{{ msg }}</h1>
    <h3>{{ name }}</h3>
    <h3>{{ sex }}</h3>
    <h3>{{ age }}</h3>
  </div>
</template>

<script>
export default {
  name: "Students",
  data() {
    return {
      msg: "欢迎来到培正学院",
      //name,sex,age等数据不能写在data里面，不然的话组件再次复用，页面展示的是同一信息
    };
  },
  props: ["name", "age", "sex"], //此处props相当于占坑，App.vue组件里面填坑
};
</script>

<template>
  <div>
    <Students name="蔡徐坤" sex="男" age="18"></Students>
    <hr />
    <Students name="吴亦凡" sex="男" age="99"></Students>
  </div>
</template>

<script>
import Students from "./components/Students.vue";
export default {
  name: "App",
  components: {
    Students,
  },
};
</script>

//如果没有props的话，组件复用里面显示的是一模一样的信息