Vue,props的使用

功能：让组件接收外部传过来的数据
使用案例：
外部传递数据：

<Student name="孙悟空" position_name="灵明石猴" change_name="七十二般变化" flight="筋斗云" :age="800"/>

接受数据：

<div class="d1">
    <h1>{{ msg }}：</h1>
    <h2>名字：{{ name }}</h2>
    <h2>他的名称：{{ hisPositionName }}</h2>
    <h2>变化之法：{{ change_name }}</h2>
    <h2>飞行之法：{{ flight }}</h2>
    <h2>年龄：{{ hisAge }}</h2>
    <button @click="showEvaluate">展示孙悟空的评价</button>
    <button @click="updatePositionName">修改他的主角名称</button>
    <button @click="updateAge">修改年龄</button>
  </div>

//简单接受方式
  //props: ["name", "position_name", "change_name", "flight",'age'],
  //接收的同时对数据进行类型限制
  /*props: {
    name: String,
    position_name: String,
    change_name: String,
    flight:String,
    age:Number
  },*/
  //接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
  props: {
    /*name: String,
    position_name: String,
    change_name: String,
    flight:String,
    age:Number*/
    name: {
      type: String, //name的类型是字符串
      required: true, //name是必要的
    },
    position_name: {
      type: String, //name的类型是字符串
      required: true, //name是必要的
    },
    change_name: {
      type: String, //name的类型是字符串
      required: true, //name是必要的
    },
    flight: {
      type: String, //name的类型是字符串
      required: true, //name是必要的
    },
    age: {
      type: Number,
      default: 800, //默认值
    },
  },

具体完整的代码如下：
Student.vue:

<template>
  <div class="d1">
    <h1>{{ msg }}：</h1>
    <h2>名字：{{ name }}</h2>
    <h2>他的名称：{{ hisPositionName }}</h2>
    <h2>变化之法：{{ change_name }}</h2>
    <h2>飞行之法：{{ flight }}</h2>
    <h2>年龄：{{ hisAge }}</h2>
    <button @click="showEvaluate">展示孙悟空的评价</button>
    <button @click="updatePositionName">修改他的主角名称</button>
    <button @click="updateAge">修改年龄</button>
  </div>
</template>

<script>
var count = 0;
export default {
  name: "Student",
  data() {
    return {
      msg: "现在我们介绍一下西游记里面的主角",
      hisPositionName: this.position_name,
      hisAge: this.age,
    };
  },
  methods: {
    showEvaluate() {
      alert("孙悟空是一位法力高强、机智勇敢的神话人物。");
    },
    updatePositionName() {
      const nameArry = ["美猴王", "齐天大圣", "斗战胜佛"];
      count++;
      if (count > 2) {
        count = 0;
      }
      this.hisPositionName = nameArry[count];
      //this.hisPositionName = "斗战胜佛";
    },
    updateAge() {
      this.hisAge++;
      console.log("修改了年龄");
    },
  },
  //简单接受方式
  //props: ["name", "position_name", "change_name", "flight",'age'],
  //接收的同时对数据进行类型限制
  /*props: {
    name: String,
    position_name: String,
    change_name: String,
    flight:String,
    age:Number
  },*/
  //接收的同时对数据：进行类型限制+默认值的指定+必要性的限制
  props: {
    /*name: String,
    position_name: String,
    change_name: String,
    flight:String,
    age:Number*/
    name: {
      type: String, //name的类型是字符串
      required: true, //name是必要的
    },
    position_name: {
      type: String, //name的类型是字符串
      required: true, //name是必要的
    },
    change_name: {
      type: String, //name的类型是字符串
      required: true, //name是必要的
    },
    flight: {
      type: String, //name的类型是字符串
      required: true, //name是必要的
    },
    age: {
      type: Number,
      default: 800, //默认值
    },
  },
};
</script>

<style>
.d1 {
  background-color: aquamarine;
}
</style>

App.vue:

<template>
	<div>
		<Student name="孙悟空" position_name="灵明石猴" change_name="七十二般变化" flight="筋斗云" :age="800"/>
	</div>
</template>

<script>
	import Student from './components/Student'

	export default {
		name:'App',
		components:{Student}
	}
</script>

main.js:

import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount("#app")