props验证
指的是在封装组件时对外界传递过来的 props 数据进行合法性的校验,从而防止数据不合法的问题。
使用数组类型的 props 节点的缺点是无法为每个 prop 指定具体的数据类型。
使用对象类型的 props 节点,可以对每个 prop 进行数据类型的校验,
验证方法:
对象类型的 props 节点提供了多种数据验证方案,例如:
① 基础的类型检查
② 多个可能的类型
③ 必填项校验
④ 属性默认值
⑤ 自定义验证函数
export default {
props: {
// 基础类型检查
//(给出 `null` 和 `undefined` 值则会跳过任何类型检查)
propA: Number,
// 多种可能的类型
propB: [String, Number],
// 必传,且为 String 类型
propC: {
type: String,
required: true
},
// Number 类型的默认值
propD: {
type: Number,
default: 100
},
// 对象类型的默认值
propE: {
type: Object,
// 对象或者数组应当用工厂函数返回。
// 工厂函数会收到组件所接收的原始 props
// 作为参数
default(rawProps) {
return { message: 'hello' }
}
},
// 自定义类型校验函数
// 在 3.4+ 中完整的 props 作为第二个参数传入
propF: {
validator(value, props) {
// The value must match one of these strings
return ['success', 'warning', 'danger'].includes(value)
}
},
// 函数类型的默认值
propG: {
type: Function,
// 不像对象或数组的默认,这不是一个
// 工厂函数。这会是一个用来作为默认值的函数
default() {
return 'Default function'
}
}
}
}
计算属性
计算属性本质上就是一个 function 函数,它可以实时监听 data 中数据的变化,并 return 一个计算后的新值,
供组件渲染 DOM 时使用
声明计算属性
为什么需要计算属性:
表达式虽然方便,但也只能用来做简单的操作。如果在模板中写太多逻辑,会让模板变得臃肿,难以维护。使用计算属性直接返回计算后的结果,使得逻辑主要在函数里处理,模板会更简洁。
① 计算属性必须定义在 computed 节点中
② 计算属性必须是一个 function 函数
③ 计算属性必须有返回值
④ 计算属性必须当做普通属性使用
计算属性与方法
计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。相比之下,方法调用总是会在重渲染发生时再次执行函数。
官方文档补充
https://cn.vuejs.org/guide/essentials/computed
监听事件
什么监听事件
在封装组件时,为了让组件的使用者可以监听到组件内状态的变化,(比如父子组件之间)此时需要用到组件的监听事件。
如何使用监听事件
父组件监听
可以通过 v-on 或 @ 来选择性地监听子组件上抛的事件,就像监听原生 DOM 事件那样:
<BlogPost
@enlarge-text="postFontSize += 0.1"
/>
子组件声明与调用
声明:
可以通过 emits 选项来声明需要抛出的事件:
<!-- BlogPost.vue -->
<script>
export default {
props: ['title'],
emits: ['enlarge-text']
}
</script>
调用
(1)可以直接通过绑定点击事件触发
<button @click="$emit('enlarge-text')">Enlarge text</button>
(2)也可以通过函数中调用this.$emit 触发
methods:{
test(){
this.$emit('enlarge-text')
}
}
<button @click="test">Enlarge text</button>
参数传递
所有传入 e m i t ( ) 的额外参数都会被直接传向监听器。举例来说, emit() 的额外参数都会被直接传向监听器。举例来说, emit()的额外参数都会被直接传向监听器。举例来说,emit(‘foo’, 1, 2, 3) 触发后,监听器函数将会收到这三个参数值。
父组件中监听事件,我们可以先简单写一个内联的箭头函数作为监听器,此函数会接收到事件附带的参数:
<MyButton @increase-by="(n) => count += n" />
也可以用一个组件方法来作为事件处理函数,该方法也会接收到事件所传递的参数:
<MyButton @increase-by="increaseCount" />
methods: {
increaseCount(n) {
this.count += n
}
}
更多案例
https://cn.vuejs.org/guide/components/events.html#event-arguments
todolist demo
使用element-plus + vue实现的 todo list demo 主要逻辑在代码文件中
https://github.com/nebofeng/Vue3_demo/tree/master/02-todolist
IT 内容具有时效性,未避免更新后未同步,请点击查看最新内容:Vue3-04_组件基础_下
文章首发于:https://nebofeng.com/2024/06/28/vue3-04_%e7%bb%84%e4%bb%b6%e5%9f%ba%e7%a1%80_%e4%b8%8b/