快盘下载:好资源、好软件、快快下载吧!

快盘排行|快盘最新

当前位置:首页软件教程电脑软件教程 → vue3-props属性基本使用梳理

vue3-props属性基本使用梳理

时间:2022-10-09 14:44:49人气:作者:快盘下载我要评论

前言

vue2中props属性的使用是比较统一的基本就一种方式;但是vue3中其实方式是比较多的;因此就打算梳理一下。
会按照选项式和组合式进行梳理;包括属性的定义、取值以及属性的监听。

应该是叫单文件组件和组合式API;不知道vue官方是根据什么区分的。
vue3-props属性基本使用梳理

单文件组件

定义

这里大体上分为两大类进行说明;这两大类都需要使用defineProps来进行定义

非ts语法

const props = defineProps({
  // 基础类型检查
  // ;给出 ;null; 和 ;undefined; 值则会跳过任何类型检查;
  propA: Number,
  // 多种可能的类型
  propB: [String, Number],
  // 必传;且为 String 类型
  propC: {
    type: String,
    required: true
  },
  // Number 类型的默认值
  propD: {
    type: Number,
    default: 100
  },
  // 对象类型的默认值
  propE: {
    type: Object,
    // 对象或数组的默认值
    // 必须从一个工厂函数返回。
    // 该函数接收组件所接收到的原始 prop 作为参数。
    default(rawProps) {
      return { message: ;hello; }
    }
  },
  // 自定义类型校验函数
  propF: {
    validator(value) {
      // The value must match one of these strings
      return [;success;, ;warning;, ;danger;].includes(value)
    }
  },
  // 函数类型的默认值
  propG: {
    type: Function,
    // 不像对象或数组的默认;这不是一个工厂函数。这会是一个用来作为默认值的函数
    default() {
      return ;Default function;
    }
  }
})

这种方式还是比较简单的;基本和vue2没有太大的区别。

ts语法

interface ganttChartItem {
    // 宽度
    width: number,
    // 颜色
    color: string
}

interface Props {
    // id
    id:string
    // 宽度
    width: number,
    // 高度
    height?: number,
    // 是否初始化
    init?: boolean,
    // 子项
    list?: Array<ganttChartItem>,
    // 是否显示描述
    desc?:string
    // 描述颜色
    descColor?:string
}
const props = withDefaults(defineProps<Props>(), {
    // 高度默认20
    height: 20,
    // 默认初始化
    init: true,
    // 子项默认为空
    list: () => [],
    // 是否显示描述
    desc: ;;,
    // 描述颜色
    descColor: ;;
});

特殊点;

泛型;可以通过定义interface接口来规范props的属性的格式。不像vue2中定义一个对象类型的属性;这个对象中可以有各种各样的子属性。?: 表示可选属性;:表示必填属性定义默认属性值时需要使用withDefaults

取值

取值时可以当成一个普通的对象;例如;

props.desc

监听

watch(
    () => props.visible,
    (val) => {
        open.value = val;
        console.log(val);
    }
);

demo

<a-b v-model:visible=;show; />

//ab.vue

<template>
    <div class=;container;>
        <el-dialog v-model=;open; title=;Tips; width=;30%>
            <span>This is a message</span>
        </el-dialog>
    </div>
</template>

<script setup lang=;ts;>
import { watch, ref } from ;vue;;
const props = defineProps({
    visible: {
        type: Boolean,
        default: false
    }
});
const open = ref(false);
watch(
    () => props.visible,
    (val) => {
        open.value = val;
        console.log(val);
    }
);
</script>

这里有个问题;虽然弹窗绑定的值可以直接是属性;但是好像不推荐这样使用
vue3

组合式

感觉setup语法糖模式用的更多一点;可能是我们公司用的比较多;。好久没这样用了;差点忘记怎么写了;

定义

这个没什么说的;跟vue2一样

 props: {
     visible: {
         type: Boolean,
         default: false
     }
 },

使用

使用时需要通过setup函数传参的方式来取值。

 setup(props) {
     return {
         props
     };
 }

监听

 watch(
     () => props.visible,
     (val) => {
         open.value = val;
         console.log(val);
     }
 );

demo

<template>
    <div>
        <el-dialog v-model=;open; title=;Tips; width=;30%>
            <span>This is a message</span>
        </el-dialog>
    </div>
</template>

<script lang=;ts;>
import { defineComponent, watch, ref } from ;vue;;
export default defineComponent({
    props: {
        visible: {
            type: Boolean,
            default: false
        }
    },
    setup(props) {
        const open = ref(false);
        watch(
            () => props.visible,
            (val) => {
                open.value = val;
                console.log(val);
            }
        );
        return {
            open
        };
    }
});
</script>

补充

其实没必要非要用props属性;props属性应该在该用的时候用。

可以看一下我的这篇文章;vue3;使用ref和emit来减少props的使用

相关文章

  • Vue3---Pinia-状态管理(环境搭建安装及各属性使用教程)详细使用教程

    Vue3---Pinia-状态管理(环境搭建安装及各属性使用教程)详细使用教程,vue3 状态管理工具 pinia 使用,Vue3状态管理之Pinia的入门使用教程,Pinia使用详解(vue3默认状态管理),详解Vue3状态管理库Pinia的使用方法,Vue3 使用Pinia状态管理,vue3新一代状态管理器 — pinia的学习与使用,vue3使用pinia管理状态,vue3全家桶之-状态管理器pinia的使用,Vue3中Pinia的基本使用,上手Vue 新的状态管理 Pinia,一篇文章就够了,Pi...
  • Vue3-Vite3-多环境配置---基于-vite-创建-vue3-全家桶项目(续篇)

    Vue3-Vite3-多环境配置---基于-vite-创建-vue3-全家桶项目(续篇),在项目或产品的迭代过程中,通常会有多套环境,常见的有:devsituatpreprod环境之间配置可能存在差异,如接口地址、全局参数等。在基于的项目中只需要添加.env.xxx文件,然后在的scripts启动或打包命令中指定mode参数即可,获取环境变量时使用。vite使用方式类似,但获取环境变量使用。...

网友评论

快盘下载暂未开通留言功能。

关于我们| 广告联络| 联系我们| 网站帮助| 免责声明| 软件发布

Copyright 2019-2029 【快快下载吧】 版权所有 快快下载吧 | 豫ICP备10006759号公安备案:41010502004165

声明: 快快下载吧上的所有软件和资料来源于互联网,仅供学习和研究使用,请测试后自行销毁,如有侵犯你版权的,请来信指出,本站将立即改正。