Vue组件基础（下）

学习目标：

• 如何对props进行验证
• 如何使用计算属性
• 组件自定义事件
• 如何在组件上使用v-model

---

学习内容：

props验证

什么是props验证

在封装组件时，对外界传递过来的props数据进行合法性验证，从而防止数据不合法的问题。
使用数组类型的props节点的缺点：无法为每个prop指定具体的数据类型

对象类型的props节点

使用对象类型的props节点，可以对每个prop进行数据类型的检验

 props: {
    msg: String,
    isVisible:Boolean,
    countAll:Number,
    list:Array
  },

props验证

对象类型的props节点提供了多种数据验证方案，例如：

• 基础的类型检查
• 多个可能的类型
• 必填项的检验
• 属性默认值
• 自定义验证函数

基础的类型检查

可以直接为组件的prop属性指定基础的校验类型，从而防止组件的使用者为其绑定错误类型的数据

props: {
    // 字符串类型
    propString: String,
    // 布尔类型
    propBoolean:Boolean,
    // 数值类型
    propNumber:Number,
    // 数组类型
    propList:Array,
    // 对象类型
    propObject:Object,
    // 日期类型
    propDate:Date,
    // 函数类型
    propFunction:Function,
    // 符号类型
    propSymbol:Symbol
  },

多个可能的类型

如果某个prop属性值的类型不唯一 ，此时可以通过数组的形式，为其指定多个可能的类型。

 props:{
    propA:[String,Number]
  }

必填项校验

如果组件的某个prop属性是必填项，必须让组件的使用者为其传递属性的值。

props:{
    propA:{
      type:[String,Number],
      required:true
    }
  }

属性默认值

在封装组件的时候可以为prop属性指定默认值。

propB:{
      type:[String,Number],
      default:"默认值"
    }

自定义验证函数

在封装组件时，可以为prop属性指定自定义的验证函数，从而对prop属性的值进行更加精准的控制。

propC:{
      validator(value){
        return ['success','warning','danger'].indexOf(value) !== -1
      }
    }

计算属性

计算属性的定义

计算属性本质就是一个Function函数，它可以实时监听data中数据的变化，并return一个计算后的新值，供组件渲染DOM时使用

如何申明计算属性

计算属性需要以function函数的形式声明到computed选项中

<template>
  <button @click="count++">count is: {{ count }}</button>
  <span>计算后：{{ plus }}</span>
</template>

<script>
export default {
name: "Computed"
  ,data(){
    return {
      count:0
    }
  }
  ,computed:{
    plus(){
      return this.count * 2
    }
  }
}
</script>

使用注意点

• 计算属性必须定义在computed节点中
• 计算属性必须是一个function函数
• 计算属性必须有返回值
• 计算属性必须当做普通属性使用

计算属性 vs 方法

相对于方法来说，计算属性会缓存计算的结果，只有计算属性的依赖项发生变化时，才会重新进行计算。因此，计算属性的性能更好。

• 计算属性的计算结果会被缓存，性能好
• 方法的计算结果无法被缓存，性能低

自定义事件

自定义事件的作用

可以使组件的使用者监听到组件内状态的变化

自定义事件的使用

• 声明自定义事件：自定义事件需要在emits节点中声明
• 触发自定义事件：通过this.$emit(‘自定义事件名称’)方法触发
• 监听自定义事件：组件使用者通过v-on监听自定义事件

<template>
  <button @click="onBtnClick">+1</button>
</template>

<script>
export default {
  name: "MyEvent",
  emits:['change'],
  methods:{
    onBtnClick(){
      console.log("触发click")
      this.$emit('change');
    }
  }
}

  <my-event @change="countChange"></my-event>

自定义事件传参

在调用this.$emit方法是，可以通过第二个参数实现自定义事件传参

<template>
  <button @click="onBtnClick">+1</button>
</template>

<script>
export default {
  name: "MyEvent",
  emits:['change'],
  props:{
    count:{
      type:Number,
      required:true
    }
  },
  data(){
    return {
      myCount:0
    }
  },
  mounted() {
    this.myCount = this.count
  },
  methods:{
    onBtnClick(){
      console.log("触发click")
      this.myCount++
      this.$emit('change',this.myCount)
    }
  }
}

  <my-event @change="countChange" :count="1"></my-event>

countChange(count){
      console.log("监听到自定义事件"+count)
    }

组件上的v-model

需要维护组件内外数据同步时，可以在组件上使用v-model指令

使用

• 父组件通过v-bind:属性绑定的形式将数据传递给子组件
• 子组件通过props接收父组件传递过来的数据
• 在父组件中v-bind前添加v-model指令
• 在子组件中声明emits自定义事件，格式为update:xxxx
• 调用this.$emit()方法触发自定义事件来更新父组件中的数据

<template>
  <button @click="add">+1</button>
</template>

<script>
export default {
  name: "VModel",
  props:{
    count:{
      type:Number,
      required: true
    }
  },
  emits:['update:count'],
  methods:{
    add(){
      this.$emit('update:count',this.count + 1)
    }
  }
}
</script>

  <v-model v-model:count="count"></v-model>