关于vue.js:Vueprops

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>