Vue-props

props接收值的几种写法

props是只读的，不允许直接修改传进来的props的值，修改就会有警告

// 最简单的接收值的方式,接收的是一个数组
props: [name,age]

// 接收参数是一个对象
props: {
    name: String,
    age: Number
}

// 最完整的方式
props: {
    name: {
        type: String,   // 数据的类型限制
        required: true  // 数据是否必传
    },
    age: {
        type: Number,
        default: true   // 数据默认值
    }
}

Demo

// 父组件
<template>
  <div>
    <Student name="景天" :age="20"></Student>
    <Student name="雪见"></Student>
  </div>
</template>

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

export default {
  name: 'HelloWorld',
  data () {
    return {
    }
  },
  components: {
    Student
  }
}
</script>

// 子组件
<template>
    <div>
      <h1>{{ msg }}</h1>
      <div>姓名：{{name}}</div>
      <div>年龄：{{age}}</div>
    </div>
</template>3
<script>

export default {
  name: 'Student',
  data () {
    return {
      msg: 'Welcome'
    }
  },
  props: {
    name: {
      type: String,
      requried: true
    },
    age: {
      type: Number,
      default: 18
    }
  }
}
</script>