Vue props

目录

• Vue props
  • 声明属性
  • 接收属性

 

Vue props

props主要是接收外部传进来的属性

外部传进来的属性不允许直接改，如果一定要改，请复制一份props的数据到data中，修改data

声明属性

<Island  name="island1" :age="18" sex="male" />
<Island  name="island2" :age="19" sex="male1" />
<Island  name="island3"  />

接收属性

<template>
  <div>
    <span>{{ name }}</span>
    <span>{{ age }}</span>
    <span>{{ sex }}</span>
  </div>
</template>

<script>
export default {
  data: () => Object.create(null),
  // 简单声明接收
  // props: ["name", "age", "sex"],
  
  // 接收并限制类型
  // props:{
  //   name:String,
  //   age:Number,
  //   sex:String
  // },

  // 接受、限制类型设置是否必传与默认值
  props: {
    name: {
      type: String,
      required: true,
    },
    age: {
      type: Number,
      default: 18,
    },
    sex: {
      type: String,
      default: "male",
    },
  },
};
</script>