Vue2.0开发之——Vue组件-组件属性(34)

发表于 分类于 ， ， 阅读时长 ≈ 2 分钟

一 概述

  • 为Count组件添加自定义属性
  • 为自定义属性添加v-bind
  • 自定义属性props是只读的
  • 自定义属性default默认值
  • 自定义属性type值类型
  • 自定义属性required必填值

二 为Count组件添加自定义属性

2.1 组件的props

props 是组件的自定义属性，在封装通用组件的时候，合理地使用 props 可以极大的提高组件的复用性！ 它的语法格式如下

1
2
3
4
5
6
7
8
export default{
 //组件的自定义属性
 props:['自定义属性A','自定义属性B','其他自定义属性...'],
 //组件的私有数据
 data(){
   return {}
 }
}

2.2 自定义属性示例

Count.vue

布局代码

1
2
3
4
5
6
7
<template>
  <div>
    <h5>Count 组件</h5>
    <p>count 的值是：{{ count }}</p>
    <button @click="count += 1">+1</button>
  </div>
</template>

自定义属性

1
2
3
4
5
6
7
8
9
10
<script>
export default {
  props: ['init'],
  data() {
    return {
      count: this.init
    }
  },
}
</script>

Left.vue

1
2
3
4
5
6
7
<template>
  <div class="left-container">
    <h3>Left 组件</h3>
    <hr />
    <MyCount :init="9"></MyCount>
  </div>
</template>

Right.vue

1
2
3
4
5
6
7
<template>
  <div class="right-container">
    <h3>Right 组件</h3>
    <hr />
    <MyCount init="6"></MyCount>
  </div>
</template>

效果图

三 为自定义属性添加v-bind

未添加v-bind(字符串) 添加v-bind(数字)
<MyCount init="6"></MyCount> <MyCount :init="6"></MyCount>

四 自定义属性props是只读的

4.1 使用自定义属性计算时出错

Count.vue代码文件

1
2
3
4
5
6
7
<template>
  <div>
    <h5>Count 组件</h5>
    <p>count 的值是：{{ init }}</p>
    <button @click="init += 1">+1</button>
  </div>
</template>

vue 规定：组件中封装的自定义属性是只读的，程序员不能直接修改 props 的值。否则会直接报错

1
2
3
[Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "init"

found in

4.2 如何修改自定义属性的值

要想修改 props 的值，可以把 props 的值转存到 data 中，因为 data 中的数据都是可读可写的！

Count.vue逻辑文件

1
2
3
4
5
6
7
8
9
10
<script>
export default {
  props: ['init'],
  data() {
    return {
      count: this.init
    }
  },
}
</script>

Count.vue布局文件

1
2
3
4
5
6
7
<template>
  <div>
    <h5>Count 组件</h5>
    <p>count 的值是：{{ count }}</p>
    <button @click="count += 1">+1</button>
  </div>
</template>

效果图

五 自定义属性default、type、required

5.1 将数组类型的props修改为对象类型

修改前

1
props: ['init'],

修改后

1
2
3
4
5
6
7
8
9
10
11
12
13
props: {
    // 自定义属性A : { /* 配置选项 */ },
    // 自定义属性B : { /* 配置选项 */ },
    // 自定义属性C : { /* 配置选项 */ },
    init: {
      // 如果外界使用 Count 组件的时候，没有传递 init 属性，则默认值生效
      default: 0,
      // init 的值类型必须是 Number 数字
      type: Number,
      // 必填项校验
      required: true
    }
  },

5.2 说明

  • 在声明自定义属性时，可以通过 default 来定义属性的默认值
  • 在声明自定义属性时，可以通过 type 来定义属性的值类型
  • 在声明自定义属性时，可以通过 required 选项，将属性设置为必填项，强制用户必须传递属性的值