vue3——组件
Vue3—父子组件传值(子组件使用 emit 传值到父组件)
大家好，又见面了，我是你们的朋友全栈君。 Vue3中，子组件通过setup函数中的第一个参数值 props 拿到定义的组件参数进行使用。如果要向父组件传参，需要使用setup函数中的第二个参数值 context（组件上下文）中的emit。官网APIhttps://v3.cn.vuejs.org/guide/migration/emits-option.html 例1：Tab菜单子组件创建子
日期 2023-06-12 10:48:40
Vue3组件基础
tips：在Vue3中，可以使用component组件方法来自定义组件component方法的第一个参数为组件名称，定义之后可以以html方式输出component方法的第一个参数为json,template属性为组件输出内容component方法可以放入createApp()的所有属性组件默认无法使用createApp()里面的数据，并且每个组件数据不共通，是独立的example:<!DO
日期 2023-06-12 10:48:40
Vue3组件进阶--emit
tips：1.父组件可以使用 props 把数据传给子组件。1.子组件可以使用 $emit 触发父组件的自定义事件。代码实例：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv=&q
日期 2023-06-12 10:48:40
Vue3局部组件
tips：在Vue3中可以使用局部组件局部组件使用components属性，属性后面的key为组件名称局部组件可以无线层级套用，数据传递用pros和emit方式代码实例：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">
日期 2023-06-12 10:48:40Vue3组件进阶--props验证类型
tips：在Vue3中，props除了父组件向子组件传递数据作用，还有数据类型验证的功能，但props属性值需要使用json数据类型如果需要验证的数据类型不正确，会有警告提示required验证必填数据，不能为空default属性为默认值，也可以用函数进行返回validator属性为精准验证基础类型的null和undefined，无法进行类型验证代码实例：<!DOCTYPE html>
日期 2023-06-12 10:48:40Vue3组件库打包指南，一次生成esm、esm-bundle、commonjs、umd四种格式
本文为Varlet组件库源码主题阅读系列第二篇，读完本篇，你可以了解到如何将一个Vue3组件库打包成各种格式上一篇里提到了启动服务前会先进行一下组件库的打包，运行的命令为：varlet-cli compile复制显然是varlet-cli包提供的一个命令：处理函数为compile，接下来我们详细看一下这个函数都做了什么。// varlet-cli/src/commands/compile.ts e
日期 2023-06-12 10:48:40Vue3学习笔记（四）——组件、生命周期
一、组件如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展，但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。如果我们将一个个功能块拆分后，就可以像搭建积木一下来搭建我们的项目。1.0、SPASPA指的是Single Page Application，就是只有一张W
日期 2023-06-12 10:48:40
vue3如何获取绑定在组件上的 textarea DOM元素
<script setup lang="ts"> import { ref, onMounted } from "vue"; onMounted(() => { transferTextarea.value.textarea.select(); }); </script> <el-input v-mo
日期 2023-06-12 10:48:40
Vue3+vite项目中如何动态导入并创建多个全局组件
背景实际开发项目中，有些时候我们需要通过全局注册多个自定义组件，但是每个组件都导入一次，将会导致代码很冗余。实现方案customComponents/index.jsconst modules = import.meta.glob("@/customComponents/*.vue"); const components = { install: function (
日期 2023-06-12 10:48:40vue3 - 引入自定义插件的组件的具体写法
1.背景 我的这一篇随笔详细讲解组件怎么制作与引入使用【vue3 - 在单独的项目制作自定义组件插件，支持vite【前提不要使用webpack专属语法】，并引入插件 -心得 - 岑惜 - 博客园 (cnblogs.com)】 但在局部引入组件时，eslint红色警告 引用名言：“又不是不能用==” 强迫症看着实属难受，怎么办？咱总不能每次都是屏蔽esli
日期 2023-06-12 10:48:40vue3中如何通过遍历传入组件名称动态创建多个component 组件
背景 在 vue3 中，如果使用 component，可以动态加载一个组件，例如 <!-- 直接创建 --> <component :is="Image" /> 这样会将已经定义好并导入的比如 Image 组件加载出来，但是如果将需要展示的自定义组件放在一个数组中，遍历展示，则无法展示成功。 <!-- 动态创建方式 1 --> <div v-
日期 2023-06-12 10:48:40Vue3学习笔记（四）——组件、插槽、生命周期、Hooks
一、组件 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展，但如果，我们将一个页面拆分成一个个小的功能块，每个功能块完成属于自己这部分独立的功能，那么之后整个页面的管理和维护就变得非常容易了。如果我们将一个个功能块拆分后，就可以像搭建积木一下来搭建我们的项目。 1.0、SPA SPA指的是Single Page Appli
日期 2023-06-12 10:48:40vue3 hooks 组件封装
前言 我以前很喜欢封装组件，什么东西不喜欢别人的，总喜欢自己搞搞，这让人很有成就感，虽然是重复造轮子，但是能从无聊的crud业务中暂时解脱出来
日期 2023-06-12 10:48:40Vue3父子组件通讯
父传子组件通讯 大家应该都比较熟悉Vue2中的父组件向子组件传值的方式，就是通过在子组件的标签上设置自定义属性，然后子组件通过 props 接受属性的值即可 其实在组合式API中也为大家推出了跟props用法极为相似的API那就是——defineProps函数，用法如下： 同于Vue2的用法我们
日期 2023-06-12 10:48:40【Vue3】Vue3中安装和配置Vant组件库
一、安装vant 1、Vue 3项目输入：npm i vant 2、vue2项目输入：npm i vant@latest-v2 二、安装个unplugin-vue-components 插件,按需引用 输入：npm i unplugin-vue-components -D
日期 2023-06-12 10:48:40vue3简单封装一个下拉框选项组件
vue3简单封装一个下拉框选项组件 组件 <!-- 这个为选择通知类型的下拉选组件 --> <template> <el-select v-model="value
日期 2023-06-12 10:48:40VUE3实用组件开发合集一：数字滚动组件
一、效果预览： 二、下载地址： 源码下载地址 三、实现效果： 数字随机滚动，可配置数字循环滚动，可配置数字自动增长（可用于
日期 2023-06-12 10:48:40vue3组件内部改变props的值
-- vue2： 内部触发改变： this.$emit("update:visible", value); 外部绑定是需要加上.sync修饰符： :visible.sync="shows" vue3: vue3取消了.sync修饰符，通过 @update:show="shows = $event" 改变props的值 内部触发改变： emit(update:visible,
日期 2023-06-12 10:48:40vue3:组件通信v-model式写法
v-model作为vue中一个非常出色语法糖，帮助我们在开发的过程中省略了很多的麻烦，在进行组件通信的过程中，我们也可以用v-model帮助我们进行一些省事的操作！ 首先说一下我的需求，子组件是一个输入框，每在子组件中输入一段话，父组件中就多一条记录
日期 2023-06-12 10:48:40