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 stringsreturn ['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>

参数传递

所有传入 $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/