组件传值 props

310 阅读1分钟

props 是组件的自定义属性,在封装通用组件的时候,合理地使用 props 可以极大的提高组件的复用性!

export default {
  // 组件自定义属性
  props: ['属性A', '属性B', ... ]

  // 组件的私有属性
  data() {
    return { }
  }
}

注意:组件中封装的自定义属性是只读的,程序员不能直接修改 props 的值。

要想修改props的值,可以把props的值转存到data中

export default {
  // 组件自定义属性
  props: ['init']

  // 组件的私有属性
  data() {
    return {
     count: this.init  // 把init转存到count中
    }
  }
}

default 默认值

在声明自定义属性时,可以通过 default 来定义属性的默认值

export default {
  // 组件自定义属性
  props: {
    init: {
    // 用default 属性定义属性的默认值
    default: 0
    }
  }
}

type 值类型

在声明自定义属性时,可以通过 type 来定义属性的值类型

export default {
  // 组件自定义属性
  props: {
    init: {
      // type 定义属性的值类型
      // 如果传递过来的值不符合此类型,则会在终端报错
      type: Number
    }
  }
}

required 必填项

在声明自定义属性时,可以通过 required 选项,将属性设置为必填项

export default {
  // 组件自定义属性
  props: {
    init: {
      // 必填项校验
      required: true
    }
  }
}