功能：让组件接收外部传过来的数据

(1).传递数据：

(2).接收数据：

第一种方式(只接收)：props:['name']

如图如果我想让下图的第二个改为小花，女，16，，有什么简便的法子吗

通过props配置就能实现

如果想让年龄加一岁，在age+1

会发现age是一个字符串，它并不会进行运算，而是直接在后面加一个1

而如果用v-bind得到的就是表达式，然后我们可以用简写形式

得到的age就是数字类型

第二种方式(限制类型)：props:{name:Number}

我们在接收年龄要求是数字类型，而不是字符串类型，那么我们可以在接收是可以进行一些限制，类如我们规定接收到的name和sex是字符串，age是数字

所以如果我们不在age动态绑定v-bind

就会报错

第三种方式(限制类型、限制必要性、指定默认值)：
props:{
name:{
type:String,//类型
required:true,//必要性
default:'老王'//默认值
}
}

props除了上方这个较为详细的写法，还有更为详细的写法

如果没写age，

就会默认age=99，再去加一

如果不写name

name不仅不会显示出来，vue还会发出警告

一般我们不会写那么完整的props，而是写简单的props

在props也不能随便乱写，如果你写一个phone

在vc(组件实例对象)中phone是显示没找到的

外部引入的数据是不能改的，就是说props中的数据不能改

如下图我设置一个按钮，修改年龄

它会报错提示不能更改prop

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

prop和data，prop的优先级更高

如果一定要更改年龄，那你可以在data里加一个Myage，把props的age的值赋予到Myage中，通过修改Myage来改年龄

点击按钮

年龄就被修改了

props也不是什么都传的，例如key（还有ref等等）

会出现报错，说key被征用了

本小结用到的代码：
MyStudent.vue文件


<template>
  <div class="demo">
    <h1>{{ msg }}</h1>
    <h1>学生姓名：{{ name }}</h1>
    <h1>学生性别：{{ sex }}</h1>
    <h1>学生年龄：{{ Myage + 1 }}</h1>
    <button @click="updateAge">点我修改年龄</button>
  </div>
</template>

<script>
// 组件交互相关的代码(数据、方法等等)
export default {
  name: "MyStudent",
  data() {
    return {
      msg: "我是一个普通学生 ",
      Myage: this.age,
    };
  },
  methods: {
    updateAge() {
      // console.log(this.age)
      this.Myage++;
    },
  },
  //简单接收
  props: ["name", "sex", "age"],

  // 接收的同时对数据进行类型的限制
  /*props: {
    name: String,
    sex: String,
    age: Number,
  },*/

  //接收的同时对数据：进行类型的限制+默认值的指定+必要性的限制
  // props: {
  //   name: {
  //     type: String,
  //     required: true,
  //   },
  //   sex: {
  //     type: String,
  //     require: true,
  //   },
  //   age: {
  //     type: Number,
  //     default: 99,
  //   },
  // },
};
</script>

App.vue文件


<template>
  <div>
    1
    <Student name='张三' sex='男' :age=18 />
    <hr />
    2
    <Student name='小花' sex='女' :age=16 />
    <hr />
  </div>
</template>

<script>
// 引入组件
import Student from "./components/MyStudent";
export default {
  name: "App",
  components: { Student },
  data() {
    return {};
  },
};
</script>

props配置