vue3+ts+antd学习笔记1

最新推荐文章于 2024-07-05 08:25:42 发布

undefinedJJ

最新推荐文章于 2024-07-05 08:25:42 发布

阅读量399

点赞数 8

文章标签： vue.js 前端 typescript

本文链接：https://blog.csdn.net/UndefindMike/article/details/136214097

版权

本文详细介绍了Vue3中的SetupContext对象，包括其提供的attrs、slots和emit功能，以及如何在组件间传递非Props属性。同时涵盖了importtype和Ant-Design-Vue中的NamePath、form验证规则等内容。

摘要由CSDN通过智能技术生成

SetupContext 是vue的什么意思

是一个特殊的对象->{attrs,slots,emit}，是在Vue3中的组合式Api中使用的，提供了一些与组件实例相关的上下文信息和功能。SetupContext对象是通过在组件的Setup（）函数中作为第二个参数传入来访问的

attrs：一个响应式对象，包含了传递给组件的非props属性（解释如下）

在父组件中使用子组件时，并且传递了一些属性

<template>
  <MyComponent foo="bar" baz="qux" />
</template>

在子组件的setup（）函数中，你可以使用attrs属性来访问这些非Props属性

import { defineComponent } from 'vue';

export default defineComponent({
  setup(props, { attrs }) {
    console.log(attrs.foo); // 输出：bar
    console.log(attrs.baz); // 输出：qux

    return {
      // 返回组件的数据和方法
    };
  },
});

import { useAttrs } from 'vue';useAttrs 是指直接获取传递组件的非props属性

<template>
  <ChildComponent v-bind:foo="bar" />
</template>
setup(props, { attrs }) {
    const attrsData = useAttrs();

    console.log(attrsData.foo); // 输出：bar

    return {
      // 返回组件的数据和方法
    };

slots：一个函数，用于访问组件的插槽内容
emit：一个函数，用于触发父组件中的事件

这些属性和方法可以在setup（）函数中使用，以便在组件内部访问

export function isPromise<T = any>(val: unknown): val is Promise<T> {
  return (
    is(val, 'Promise') &&
    val instanceof Promise &&
    [val.then, val.catch, val.finally].every(isFunction)
  );
}

lodash的omit函数有哪些常见的用途

常用于从对象中排除特定的属性

var _ = require('lodash');
var object = { 'a': 1, 'b': '2', 'c': 3 };
var result = _.omit(object, ['a', 'b']);

console.log(result); // 输出 { c: 3 }

import type { NamePath } from 'ant-design-vue/es/form/interface' 是什么功能

import type 是指只引入类型而不导入具体的值或者对象

NamePath 类型通常用于表单的相关操作，用于指定表单字段组成的数组

type NamePath = string | number | (string | number)[];

interface FieldValidation {
    name: NamePath;
    required: boolean;
    minLength?: number;
}

function validateField(value: any, validation: FieldValidation): boolean {
    const { name, required, minLength } = validation;

    if (required && (value === undefined || value === null)) {
        console.error(`${name} is required.`);
        return false;
    }

    if (minLength !== undefined && typeof value === 'string' && value.length < minLength) {
        console.error(`${name} must be at least ${minLength} characters long.`);
        return false;
    }

    return true;
}

const formFields: FieldValidation[] = [
    { name: 'firstName', required: true },
    { name: 'lastName', required: true },
    { name: ['address', 'street'], required: true },
    { name: ['address', 'city'], required: true },
    { name: 'age', required: true, minLength: 2 }
];

const formData = {
    firstName: 'Alice',
    lastName: 'Smith',
    address: {
        street: '123 Main St',
        city: 'New York'
    },
    age: 30
};

function validateForm(formData: any, formFields: FieldValidation[]): boolean {
    let isValid = true;

    formFields.forEach(field => {
        const value = getFieldByPath(formData, field.name);
        if (!validateField(value, field)) {
            isValid = false;
        }
    });

    return isValid;
}

function getFieldByPath(obj: any, path: NamePath): any {
    if (typeof path === 'string') {
        return obj[path];
    } else if (Array.isArray(path)) {
        return path.reduce((acc, key) => acc[key], obj);
    }
}

const isFormValid = validateForm(formData, formFields);
console.log("Form is valid:", isFormValid);

function demo（value: any, validation: FieldValidation): boolean{}是什么意思

boolean表示返回值是true 或者false，void表示没有返回值

import type { Rule } from 'ant-design-vue/es/form'; rule是用来干什么的

  // 来导入 Rule 类型 ,
 Defining a form validation rule
const usernameRule: Rule = {
     required: true,
     message: 'Please enter your username',
     trigger: 'blur',
  };