Vue组件进阶

Vue组件进阶

props验证

对外界传递进来的props数据进行合法性的校验，防止数据不合法

props:{
    count:Number,
    state:Boolean
}

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

1. 基础的类型检查

   <script>
   	export default{
           propA:String,
           propB:Number,
           propC:Boolean,
           propD:Array,
           propE:Object,
           propF:Date,
           propG:Function,
           propH:Symbol,
       }
   </script>
   

2. 多个可能的类型

   <script>
   export default{
       props:{
           propA:[String,Number],
       }
   }
   </script>
   

3. 必填项校验

   <script>
   	export default{
           props:{
               propB:{
                   type:String,
                   //表示必填项
                   required:true
               }
           }
       }
   </script>
   

4. 属性默认值

   <script>
   	export default{
           props:{
               propC:{
                   type:Number,
                   //默认值
                   default:100
               }
           }
       }
   </script>
   

5. 自定义验证函数

   <script>
   	export default{
           props:{
               propD:{
                   //自定义函数
                   validator(value){
                       return ['success',
                              'warning',
                              'danger'].indexOf(value) !== -1
                   }
               }
           }
       }
   </script>
   

计算属性

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

声明

计算属性需要以function函数的形式声明到组件的computed选项中，实例代码如下：

<template>
<input type="text" v-model.number="count" />
<p>
    {{ count }} 乘以2的值为：{{plus}}
</p>
</template>

<script>
data(){
	return {count: 1}
},
    //计算属性
computed:{
	plus(){
		return this.count * 2
}
}</script>

注意：计算属性侧重于得到一个计算的结果，因此计算属性中必须有 return 返回值！

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

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

自定义事件

在封装组件时，为了让组件的使用者可以监听到组件内状态的变化，此时需要用到组件的自定义事件。

步骤

在封装组件时：

1. 声明自定义事件

   <template>
   <h3>
       Counter组件
       </h3>
   <button>
       +1
       </button>
   </template>
   <script>
   export default{
       //组件的自定义事件，必须事先声明到emits节点中
       emits:['change'],
   }
   </script>
   

2. 触发自定义事件

   在 emits 节点下声明的自定义事件，可以通过 this.$emit(‘自定义事件的名称’) 方法进行触发，示例代码如下：

   <template>
   <h3>
       Counter组件
       </h3>
   <button @click="onBtnClick">
       +1
       </button>
   </template>
   <script>
   export default{
       //组件的自定义事件，必须事先声明到emits节点中
       emits:['change'],
       methods:{
           onBtnClick(){
               this.$emit('change')
           }
       }
   }
   </script>
   

在使用组件时：

1. 监听自定义事件

   <my-counter @change="getCount"></my-counter>
   methods:{
   	getCount(){
   		console.log('get it')
   }
   }
   

自定义事件传参

在调用 this.$emit() 方法触发自定义事件时，可以通过第 2 个参数为自定义事件传参，示例代码如下：

<template>
<h3>
    Counter组件
    </h3>
<button @click="onBtnClick">
    +1
    </button>
</template>
<script>
export default{
    //组件的自定义事件，必须事先声明到emits节点中
    emits:['change'],
    methods:{
        onBtnClick(){
            this.$emit('change',this.count)
        }
    }
}
</script>

组件上的v-model

v-model 是双向数据绑定指令，当需要维护组件内外数据的同步时，可以在组件上使用 v-model 指令。

父组件通过 v-bind: 属性绑定的形式，把数据传递给子组件

② 子组件中，通过 props 接收父组件传递过来的数据

① 在 v-bind: 指令之前添加 v-model 指令

② 在子组件中声明 emits 自定义事件，格式为 update:xxx

③ 调用 $emit() 触发自定义事件，更新父组件中的数据