Vue3-04_组件基础_下

776次阅读
没有评论

共计 2166 个字符,预计需要花费 6 分钟才能阅读完成。

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>

参数传递

所有传入 $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_组件基础_下
文章首发于:http://nebofeng.com/2024/06/28/vue3-04_%e7%bb%84%e4%bb%b6%e5%9f%ba%e7%a1%80_%e4%b8%8b/

正文完
欢迎关注个人公众号, 内含各种工具及大厂内推码合集
post-qrcode
 0
HTML文本

本文链接:

nebofeng
版权声明:本站原创文章,由 nebofeng 于2024-06-28发表,共计2166字。
转载说明:除特殊说明外本站文章皆由CC-4.0协议发布,转载请注明出处。
评论(没有评论)
验证码