一、props 验证
1. 什么是 props 验证
指的是:在封装组件时对外界传递过来的 props 数据进行合法性的校验,从而防止数据不合法的问题。
使用数组类型的 props 节点的缺点:无法为每个 prop 指定具体的数据类型。
2. 对象类型的 props 节点
使用对象类型的 props 节点,可以对每个 prop 进行数据类型的校验,示意图如下:
3. props 验证
对象类型的 props 节点提供了多种数据验证方案,例如:
①基础的类型检查
②多个可能的类型
③必填项校验
④属性默认值
⑤自定义验证函数
3.1 基础的类型检查
可以直接为组件的 prop 属性指定基础的校验类型,从而防止组件的使用者为其绑定错误类型的数据:
export default {
props: { //支持的8种基础类型
propA: String, //字符串类型
propB: Number, //数字类型
propC: Boolean, //布尔值类型
propD: Array, //数组类型
propE: 0bject, //对象类型
propF: Date, //日期类型
propG: Function, //函数类型
propH: Symbol, //符号类型
},
}
3.2 多个可能的类型
如果某个 prop 属性值的类型不唯一,此时可以通过数组的形式,为其指定多个可能的类型,示例代码如下:
export default {
props: {
// propA 属性的值可以是“字符串"或"数字”
propA:[String,Number],
},
}
3.3 必填项校验
如果组件的某个 prop 属性是必填项,必须让组件的使用者为其传递属性的值。此时,可以通过如下的方式将其设置为必填项:
export default {
props: {
//通过"配置对象"的形式,来定义 propB属性的“验证规则"
propB: {
type: String,//当前属性的值必须是String字符串类型
required: true //当前属性的值是必填项,如果使用者没指定propB属性的值,则在终端进行警告提示
},
},
},
3.4 属性默认值
在封装组件时,可以为某个 prop 属性指定默认值。示例代码如下:
export default iprops: {
//通过“配置对象"的形式,来定义propC属性的“验证规则"
propC: {
type: Number,
default: 100 //如果使用者没有指定 propC的值,则propC属性的默认值为100},
},}
3.5 自定义验证函数
在封装组件时,可以为 prop 属性指定自定义的验证函数,从而对 prop 属性的值进行更加精确的控制:
export default {
props: {
//通过“配置对象"的形式,来定义propD属性的“验证规则”
propD: {
//通过validator函数,对propD属性的值进行校验,“属性的值"可以通过形参value进行接收
validator(value) {
// propD属性的值,必须匹配下列字符串中的一个
// validator 函数的返回值为true表示验证通过,false表示验证失败
return [ 'success ', 'warning' , 'danger ' ].indexOf(value) !== -1
},
},
},
},
二、计算属性
1. 什么是计算属性
计算属性本质上就是一个function 函数,它可以实时监听data 中数据的变化,并return 一个计算后的新值,供组件渲染 DOM 时使用。
2. 如何声明计算属性
计算属性需要以function 函数的形式声明到组件的computed 选项中,示例代码如下:
<input type="text" v-model.number="count"/>
<p>{{ count }}乘以2的值为: {{ plus }}</p>
data() {
return { count: 1 }
},
computed: {
plus() { //计算属性:监听 data中 count值的变化,自动计算出 count * 2之后的新值
return this.count* 2
},
}
注意:计算属性侧重于得到一个计算的结果,因此计算属性中必须有 return 返回值!
3. 计算属性的使用注意点
①计算属性必须定义在 computed 节点中
②计算属性必须是一个 function 函数
③计算属性必须有返回值
④计算属性必须当做普通属性使用
4. 计算属性 vs 方法
相对于方法来说,计算属性会缓存计算的结果,只有计算属性的依赖项发生变化时,才会重新进行运算。因此计算属性的性能更好:
computed: {
plus() { //计算属性的计算结果会被缓存,性能好console.log('计算属性被执行了')
return this.count * 2
},
},
methods: {
plus() { //方法的计算结果无法被缓存,性能低console.log( '方法被执行了')
return this.count * 2
}
},
三、自定义事件
1. 什么是自定义事件
在封装组件时,为了让组件的使用者可以监听到组件内状态的变化,此时需要用到组件的自定义事件。
2. 自定义事件的 3 个使用步骤
在封装组件时:
①声明自定义事件
②触发自定义事件
在使用组件时:
③监听自定义事件
2.1 声明自定义事件
开发者为自定义组件封装的自定义事件,必须事先在emits节点中声明,示例代码如下:
<template>
<h3>Counter组件</h3><button>+1</button></template>
<script>
export default {
// my-counter 组件的自定义事件,必须事先声明到emits节点中
emits: [ ' change ' ],
}
</script>
2.2 触发自定义事件
在emits节点下声明的自定义事件,可以通过this.$emit('自定义事件的名称')方法进行触发,示例代码如下:
<template>
<h3>Counter组件</h3>
<button @click="onBtnClick">+1</button></template>
<script>
export default {
emits: [ ' change ' ],
methods: {
onBtnClick() {
this.$emit( ' change') //当点击+1按钮时,调用this.$semit()方法,触发自定义的 change 事件},
},
</script>
2.3 监听自定义事件
在使用自定义的组件时,可以通过v-on的形式监听自定义事件。示例代码如下:
<!--使用v-on指令绑定事件监听-->
<my-counter @change="getCount"></my-counter>
methods: {
getCount() {
console.log( '监听到了count 值的变化! ')
}
}
3. 自定义事件传参
在调用this.$emit() 方法触发自定义事件时,可以通过第 2 个参数为自定义事件传参,示例代码如下:
<template>
<h3>Counter组件</h3>
<button @click="onBtnClick">+1</button></template>
<script>
export default {
emits: [ ' change ' ],
methods : {
onBtnClick() {
this.$emit( ' change' , this.count) //触发自定义事件时,通过第二个参数传参},
},
},
}
</script>
四、组件上的 v-model
1. 为什么需要在组件上使用 v-model
v-model 是双向数据绑定指令,当需要维护组件内外数据的同步时,可以在组件上使用 v-model 指令。示意图如下:
- 外界数据的变化会自动同步到 counter 组件中
- counter 组件中数据的变化,也会自动同步到外界
2. 在组件上使用 v-model 的步骤
①父组件通过v-bind:属性绑定的形式,把数据传递给子组件
②子组件中,通过props接收父组件传递过来的数据
①在 v-bind: 指令之前添加v-model 指令
②在子组件中声明emits自定义事件,格式为update:xxx
③调用$emit() 触发自定义事件,更新父组件中的数据
视频:
黑马程序员Vue全套视频教程,从vue2.0到vue3.0一套全覆盖,前端学习核心框架教程_哔哩哔哩_bilibili
此文章是本人学习视频自我总结,如有侵犯还望原谅。侵权必删。