首页 > 其他分享 >Vue3组件二次封装

Vue3组件二次封装

时间:2023-07-25 15:13:40浏览次数:39  
标签:封装 useAttrs useSlots Vue3 组件 const

naive-ui的n-input举例

<template>
    <n-input 
        clearable
        placeholder=""
        v-bind="$attrs"
    >
        <template v-for="(value, name) in $slots" #[name] = "slotData">
            <slot :name="name" v-bind="slotData || {}"></slot>
        </template>
    </n-input>
</template>
    //import { useAttrs, useSlots } from 'vue'
    //const slots = useSlots()
    //const attrs = useAttrs()
<script lang='ts' setup>
</script>

<style scoped lang='less'>

</style>

标签:封装,useAttrs,useSlots,Vue3,组件,const
From: https://www.cnblogs.com/DaiTouE/p/17579887.html

相关文章

  • 数据可视化组件封装
    数据可视化组件封装指南介绍数据可视化在现代应用程序开发中扮演着重要的角色。通过将数据以可视化的方式展示出来,我们可以更好地理解和分析数据。为了方便重复使用和维护,我们需要将数据可视化组件进行封装。在本文中,我将向你介绍数据可视化组件封装的流程和具体步骤。流程概述......
  • Form和ModelForm组件
    1.为什么使用form和modelform1.1不使用form时 当不用form时,想校验浏览器发来的数据需要使用很多request.Post.get拿到信息,再写函数进行逐个校验1.2使用form 不用再在视图函数内进行校验 Form功能:数据校验,自动生成HTML对应的标签,初始化 ......
  • 2023-07-25 uview1.0的u-number-box组件在渲染时会触发change,如何才能避免事件影响?==
    前言:购物车用到加减购物车数量的一个步进器组件,使用的是uview组件1.0版本的u-number-box。该组件设置了一个@change事件,该事件会在页面渲染的时候触发一次,如果你在里面调用了接口,比如增加/减少购物车数量,那么每次一刷新购物车该事件就会被触发,从而导致不必要的报错。解决方案:在......
  • antd 组件 select input cheeckboxGround 传参 自定义传参
    tempfunclog:......
  • vue组件中引入自定义js文件
    在组件的script标签内直接引入:importmyFunctionfrom'@/util/custom.js'; 开始使用自定义js中的方法:exportdefault{//...otherVuecomponentoptionsmethods:{someMethod(){//Callthecustomfunctionfromyourcustom.jsmyFunctio......
  • 从vue2到vue3,自定义组件的v-model实现原理
    前言相信使用vue开发的同学应该都体会过v-model的便利,它可以非常方便地进行双向数据绑定,只要重新输入内容,视图就会立刻发生改变。本文将着重介绍如何在自定义组件当中使用v-model,以及在vue2和vue3中使用方式上的差异。概述v-model是一个语法糖,它在组件使用时相当于如下简写://......
  • Unity UGUI的EventSystem(事件系统)组件的介绍及使用
    UnityUGUI的EventSystem(事件系统)组件的介绍及使用1.什么是EventSystem组件?EventSystem是UnityUGUI中的一个重要组件,用于处理用户输入事件,如点击、拖拽、滚动等。它负责将用户输入事件传递给合适的UI元素,并触发相应的事件回调函数。2.EventSystem组件的工作原理EventSystem......
  • Angular: 父子·组件传值
    父传子在子组件中,使用@Input()装饰器来声明输入属性。在父组件中,在子组件标签上使用[propertyName]语法来传递数据给子组件的输入属性。效果图子传父子组件向父组件发送消息:使用输出属性(Output)。在子组件中,使用@Output()装饰器和EventEmitter来声明输出属性并......
  • vant组件没有被更新
    环境:uniapp、vue3、vant-weapp<template> <van-field:value="content"></van-field> <view>{{content}}</view></template>修改content,但van-field并没有跟着发生变化,而下面的{{content}}变化了。这可能是vant-weapp本身的问题。查看源码后发现,van-field的val......
  • Unity UGUI的RawImage(原始图片)组件的介绍及使用
    UnityUGUI的RawImage(原始图片)组件的介绍及使用1.什么是RawImage组件?RawImage是UnityUGUI中的一个组件,用于显示原始图片。与Image组件不同,RawImage可以直接显示原始图片的像素数据,而不需要经过额外的处理。2.RawImage组件的工作原理RawImage组件通过将原始图片的像素数据直......