vue组件的props属性

VUE组件的props属性

---

• vue组件可以通过props属性来从父组件获取值
• props属性可以有以下几种写法

  // 数组写法
  props: ['title', 'content', 'like']
  // 对象写法 - 1
  props: {
      title: String, // 指定title的类型，设置title只能是String类型的
      content: undefine, // undefine和null表示content可以是任何类型的
      like: [String, Number], // like可以是数组中的任意类型 
  }
  // 对象写法 - 2
  props: {
      title: {
          type: String, // type指定属性类型，用法同上
          default: 'title', // default指定默认值
      },
      content: {
          type: String,
          required: ture, // reuired声明属性是否是必须的，即父组件是否必须传值
      },
      like: {
          type: Number,
          validator: val => { // 自定义验证函数
              return val > 100
          },
      }
  }
  

• 一般情况下，我们都是使用最后一种写法，即props中的每个属性都是一个对象，我们先称它们为prop对象
• 每个prop对象都可以有如下属性
  • type
    • 该属性指明prop的类型，type的值可以是下列原生构造函数中的一个
      • [String, Boolean, Number, Array, Object, Date, Function, Symbol]
    • 也可以是null或者undefine，表示prop可以是任何类型的
    • 或者是一个自定义的构造函数，这会通过instanceof的方式来进行比较，来验证prop的值是否是通过new对应的构造函数创建的

      props: {
          user: { // user = new Persion()
              type: Persion
          }
      }
      

  • default
    • 该属性为prop设定一个默认值，父组件传的值将会覆盖该默认值
  • required
    • 该属性的值是一个布尔值，表明prop是否是必须的，即父组件是否必须传值
  • vaildator
    • 该属性的值是一个函数，有一个参数是prop当前的值，返回一个布尔值，使用方式如上
    • 当 prop 验证失败的时候，(开发环境构建版本的) Vue 将会产生一个控制台的警告

    注意那些 prop 会在一个组件实例创建之前进行验证，所以实例的 property (如 data、computed 等) 在 default 或 validator 函数中是不可用的

• props中的属性是通过单向数据流的方式从父组件传到子组件的
• 这意味着：
  • props中的属性只能通过父组件来更新
  • 子组件不能直接通过this.prop = xx的方式来更新props中的属性
  • 子组件要更新props中的属性，可以使用如下两种方式

  // 父组件
  <Children :msg.sync="msg" />
  // ...
  data() {
      return {
          msg: 'original'
      }
  }
  // 子组件
  props: {
      msg: {
          type: String,
      }
  }
  methods: {
      handleChange() { // 触发handleChange方法后改变msg
          this.$emit('update:msg', 'change')
      }
  }
  

   --- 子组件
   props: {
     value: {
       type: [Number, String],
     },
     changeMsg: {
       type: Function,
       default: () => { },
     }
   },
   data () {
     return {
       msg: this.value
     }
   },
   methods: {
     handleChangeMsg () {
       this.msg = 'change'
       this.$emit('input', this.msg)
     }
   }
  --- 父组件
  <template>
     {{ msg }}
  </template>
  
  <script>
  export default {
   name: 'Home',
   components: {
     Children
   },
   data () {
     return {
       msg: 'original',
     }
   }
  }