props自定义属性

props

含义

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

注意：全局组件在main.js里注册；使用者中标签直接调用（注意v-bind）；组件里注意props的只读性。

method单行代码简写

仅单行能这么写

<template>
<div>
  <button @click="add">+1</button>
</div>
</template>
<script>
  methods: {
    add() {
      this.count += 1
    }
  }
</script>

<template>
<div>
<button @click="count += 1">+1</button>
</div>
</template>
<script>
</script>

语法

props属性的形式

1.数组

数组形式：使用数组形式定义 props 时，每个元素表示一个属性名。这种方式适合于简单的属性定义，不需要指定额外的校验或配置。

props: ['prop1', 'prop2', 'prop3']

2.对象

对象形式：使用对象形式定义 props 时，每个键值对表示一个属性的配置，其中键是属性名，值是配置对象。这种方式适合于复杂的属性定义，可以提供更多的配置选项，如类型、默认值、校验函数等。

props: {
  prop1: {
    type: String,
    required: true
  },
  prop2: {
    type: Number,
    default: 0
  },
  prop3: {
    type: Array,
    default: () => []
  }
}

props只读性

读：可渲染；写：可修改。

注意：props 是只读的，不要直接修改 props 的值，否则终端会报错！比如<button @click="init += 1">+1</button>, 欲修改props的值，可以吧props的值转存到data中，因为data的数据都是可读可写的。

default默认值

在声明自定义属性时，可以通过default来定义属性的默认值，默认值可以是确保即使没有传递属性值，组件也能正常工作的一切值。

init相关在init属性内设置。

type值类型

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

如果输的不对会报错。

required必填项校验

required: true

意味着在使用该组件时，必须传入这该组件props属性所有属性的值，否则会在控制台输出警告信息。

注意：必填项只校验有没有传递属性， 和默认值无关。

代码示例

<script>
  export default {
    // props 是"自定义属性"，允许使用者通过自定义属性，为当前组件指定初始值
    // 自定义属性的名字，是封装者自定义的（只要名称合法即可），这里的是init，在使用者组件中。
    // props 中的数据，可以直接在模板结构中被使用
    // 注意：props 是只读的，不要直接修改 props 的值，否则终端会报错！比如<button @click="init += 1">+1</button>
    // props: ['init'],
    props: {
      // 自定义属性A : { /* 配置选项 */ },
      // 自定义属性B : { /* 配置选项 */ },
      // 自定义属性C : { /* 配置选项 */ },
      init: {//init相关在init属性内设置
        // 如果外界使用 Count 组件的时候，没有传递 init 属性，则默认值生效
        default: 0,
        // init 的值类型必须是 Number 数字
        type: Number,
        // 必填项校验
        required: true
      }
    },
    data() {
      return {
        // 把 props 中的 init 值，转存到 count 上
        count: this.init
      }
    },
    methods: {
      show() {
        console.log(this)
      }
    }
  }
</script>

<template>
<div>
  //这个是使用者
  //init='9'这里的是字符串
  //使用v-bind里面写的是js表达式，js里直接写9是number
  //如果是字符串累加就成了91111111，而非9+1+1+1
  <MyCount :init="9"></MyCount>
  </div>
</template>