guizi0809的博客

二次封装组件，大大提高工作效率和降低项目维护成本；

先看效果图直接上代码utils.js// 用于模拟接口请求export const getRemoteData = (data = '获取数据', time = 2000) => { return new Promise((resolve) => { setTimeout(() => { console.log(`模拟获取接口数据`, data) resolve(data) }, time)

这里实现一个极简易弹窗作为示例，其他功能和样式可自行补充和优化；

手把手教如何封装动态表单组件

手把手教如何封装动态表单组件

手把手教如何封装动态表单组件

手把手教如何封装动态表单组件

vue3 自定义指令的使用详解

通常，我们从父组件向子组件传递数据（或者说子组件接收父组件传递的数据）时，使用 props。当我们想用父组件向深层子组件传递数据时，需要使用 props 沿着组件链逐级传递下去，十分麻烦，这时 provide/inject 就可以派上用场。论组件层次结构有多深，父组件都可以作为其所有子组件的依赖提供者。这个特性有两个部分：父组件有一个 provide 选项来提供数据，子组件有一个inject 选项来开始使用这些数据。实际上，你可以将依赖注入看作是“long range props”，除了：.

插槽内容<!-- 父组件 --><child-component> you can add something here.</child-component><!-- 子组件 child-component.vue --><div> <h1>I'm child component</h1> <slot></slot></div>当子组件渲染的时候，

v-model 的参数默认情况下，组件上的 v-model 使用 modelValue 作为 prop 和 update:modelValue 作为事件。child-component.vue<template> <div> <input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"> </di