Vue中的props——向子组件传递数据

Vue中的props——向子组件传递数据

什么是props

​ prop，翻译为属性，props则是属性的复数，props是Vue组件中的一个属性，可以用来动态传递和修改数据

props如何使用(三种用法,一般使用第一种)

​ 1.数组型，只声明要进行传递的属性

props:["name","sex","age"]

​ 2.对象型，声明要传递的属性以及限制传递值的类型

props:{
	name:String,
	sex:String,
	age:Number
}

​ 3.属性对象型，声明要传递的属性，限制传递值的类型，以及属性的必要性和属性的缺省值等等

props:{
	name:{
		type:String,
        require:true	//属性必要性：true表示属性必须进行传递
	},
    sex:{
		type:String,
        require:true,
        default:'未知'
    },
    age:{
		type:Number,
        default:18
    }
}

使用props需要注意的事项：

​ 1.需要用组件标签来传递属性，像这样：

<School name="异类小魔鬼" sex="男" age="18"></School>

​ 2.使用v-bind去传输数字，不然会传成字符串，造成输出错误

<School name="异类小魔鬼" sex="男" :age="18"></School>

​ 3.想要操作props传入属性的值，可以在data中创建一个新属性，将传入属性的值赋值给新属性，并用方法(methods)对其进行操作，如下

<template>
  <div>
    <h2>学生姓名：{{ name }}</h2>
    <h2>学生性别：{{ sex }}</h2>
    <h2>学生年龄：{{ myAge }}</h2>
    <button @click="addNumber">点我+1</button>
  </div>
</template>

<script>
export default {
  name: "Student",
  data() {
    return {
      //data内的值最终会被props覆盖掉
      //   name: "异类小魔鬼",
      //   sex: "男",
      //   age: 18,
      // 如果想要对props传进来的值进行操作，可以这样
      myAge: this.age,
      //然后利用方法对其进行操作
    };
  },
  methods: {
    addNumber() {
      this.myAge++;
    },
  },
  props: ["name", "age", "sex"],
};
</script>

​ 4.如果data中有与props中重名的属性，在页面上呈现时，data中的属性会被props中的属性覆盖掉

​ 5.props内的属性尽量和组件标签传进来的属性一一对应，不多，也不少

​ 6.使用props不可使用关键字，比如ref，key等等已经被命名好的标签属性