vue3 自定义组件

news2024/12/23 13:23:57

在项目中,我们会遇到一些没有现成的组件,那这个时候我们就需要自己去写一个满足我们需求的组件。

比如,我需要一个上下排布,上面显示标题,下面显示内容的组件。封装完成后方便复用。

fa981059540403b026e9cc71ce04b50c.png

1、布局组件

我定义一个上下结构的组件

<template>


  <div>


<!--  标题  -->
    <div class="title">我是标题</div>
<!--  内容  -->
    <div class="content">我是内容</div>
  </div>


</template>

2、定义组件属性

组件里需要至少两个属性,一个是title,一个是content

这里采用Props来满足外部内部传值。在d.ts中定义一个属性接口

// d.ts
export interface Props {
    // 标题
    title?: string,
    // 内容
    content?: string
}

在组件中定义属性

<script lang="ts" setup>


import type {Props} from "@/components/custom-view/customView";


// 定义属性
const props = withDefaults(defineProps<Props>(), {
  title: '我是默认标题',
  content: '我是默认内容'
})
</script>

在组件中使用属性

<template>


  <div>


<!--  标题  -->
    <div class="title">{{ props.title }}</div>
<!--  内容  -->
    <div class="content">{{ props.content }}</div>
  </div>


</template>

一个简单的自定义组件就完成了外部赋值到内部改变标题和内容的显示

3、外部的调用

<custom-view title="标题" content="内容"></custom-view>

5b35e49b85626c42ad6dc12e6a6bdc4b.png

总结:在定义组件的时候,要了解我们需要什么样的组件,包含组件结构(怎么布局)、组件所具备功能(组件属性,属性值定义,属性值使用)。组件定义完成就在外层调用组件。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1680925.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Git使用(4):分支管理

一、新建分支 首先选择Git -> Branches... 然后选择 New Branch&#xff0c;输入新分支名称&#xff0c;例如dev。 可以看到右下角显示已经切换到新建的dev分支了。 push到远程仓库&#xff0c;可以看到新添加的分支。 二、切换分支与合并分支 为了演示合并分支&#xff0c…

Linux(七) 动静态库

目录 一、动静态库的概念 二、静态库的打包与使用 2.1 静态库的打包 2.2 静态库的使用 三、动态库的打包与使用 3.1 动态库的打包 3.2 动态库的使用 3.3 运行动态库的四种方法 四、总makefile 一、动静态库的概念 静态库&#xff1a; Linux下&#xff0c;以.a为后缀的…

Python——IO编程

IO在计算机中指Input/Output&#xff0c;也就是输入和输出。由于程序和运行时数据是在内存中驻留&#xff0c;由CPU这个超快的计算核心来执行&#xff0c;涉及到数据交换的地方&#xff0c;通常是磁盘、网络等&#xff0c;就需要IO接口。 比如你打开浏览器&#xff0c;访问新浪…

蓝桥杯 EDA 组 历届国赛真题解析

一、2021年国赛真题 1.1 CN3767 太阳能充电电路 CN3767 是具有太阳能电池最大功率点跟踪功能的 4A&#xff0c;12V 铅酸电池充电管理集成电路。 最大功率点应指的是电池板的输出电压&#xff0c;跟踪电压其做保护。当然 CN3767 也可以直接使用直流充电&#xff0c;具体可以阅读…

污水处理环保设备厂商怎么选

在选择污水处理环保设备厂商时&#xff0c;需要综合考虑多个因素来确保选取的供应商能够提供高质量的设备和服务。以下是一些主要的考虑因素&#xff1a; 企业资质和认证&#xff1a;首先检查供应商是否拥有相关的资质证书和行业认证&#xff0c;例如ISO 9001质量管理体系认证、…

0基础安装 composer

解决&#xff1a; composer 不是内部或外部命令&#xff0c;也不是可运行的程序 或批处理文件。 php composer.phar可以运行 安装环境&#xff1a;系统w11 官网地址&#xff1a;Composer 1.安装composer 1.1打开命令行窗口 在命令行窗口里&#xff0c;右键是粘贴&#xff0…

Java | Leetcode Java题解之第92题反转链表II

题目&#xff1a; 题解&#xff1a; class Solution {public ListNode reverseBetween(ListNode head, int left, int right) {// 设置 dummyNode 是这一类问题的一般做法ListNode dummyNode new ListNode(-1);dummyNode.next head;ListNode pre dummyNode;for (int i 0; …

【数组的度】leetcode,python

一种很菜的做法&#xff08;暴力&#xff09;&#xff0c;for循环&#xff08;样例能过一大半呢&#xff0c;复杂度的话。。。&#xff09; class Solution:def findShortestSubArray(self, nums: List[int]) -> int:nlen(nums)if n1:return nmx1#出现次数最多的计算for i …

Google:站长移除无效网址

当您的网址不需要呈现在Google站长中时&#xff0c;您可以在站长工具中移除网址 操作步骤&#xff1a;登录Google站长&#xff0c;绑定网站完成后&#xff0c;点击左侧删除 >> 输入网址 如果遇到一些网址&#xff0c;可以找寻网址间的规律&#xff0c;比如说&#xff0…

【oracle】图片转为字节、base64编码等形式批量插入oracle数据库并查询

1.熟悉、梳理、总结下Oracle相关知识体系 2.欢迎批评指正&#xff0c;跪谢一键三连&#xff01; 资源下载&#xff1a; oci.dll、oraocci11.dll、oraociei11.dll3个资源文件资源下载&#xff1a; Instant Client Setup.exe资源下载&#xff1a; oci.dll、oraocci11.dll、oraoc…

java代码混淆工具ProGuard混淆插件

java代码混淆工具ProGuard混淆插件 介绍 ProGuard是一个纯java编写的混淆工具&#xff0c;有客户端跟jar包两种使用方式。可以将程序打包为jar&#xff0c;然后用工具进行混淆&#xff0c;也可以在maven中导入ProGuard的插件&#xff0c;对代码进行混淆。 大家都知道 java代…

【SQL】SQL常见面试题总结(1)

目录 1、检索数据1.1、从 Customers 表中检索所有的 ID1.2、检索并列出已订购产品的清单1.2、检索所有列 2、排序检索数据2.1、检索顾客名称并且排序2.2、对顾客 ID 和日期排序2.3、按照数量和价格排序2.4、检查 SQL 语句 3、过滤数据3.1、返回固定价格的产品3.2、返回产品并且…

基于Vue和uni-app的增强型单选ccRadioView组件开发

标题&#xff1a;基于Vue和uni-app的增强单选组件ccRadioView的设计与实现 摘要&#xff1a;本文将详细介绍如何使用Vue和uni-app构建一个简单、好用且通用的单选框组件ccRadioView。该组件提供了单选列表的功能&#xff0c;并支持反向传值&#xff0c;方便开发者快速实现单选…

新人学习笔记值(初始JavaScript)

一、Java Script是什么 1.Java Script是世界上最流行的语言之一&#xff0c;是一种运行在客户端的脚本语言&#xff08;script是脚本的意思&#xff09; 2.脚本语言&#xff1a;不需要编译&#xff0c;运行过程中由js解释器&#xff08;js引擎&#xff09;进行解释并运行 3.现在…

如何同步管理1000个设备的VLAN数据?

什么是VLAN&#xff1f; VLAN&#xff0c;也就是虚拟局域网&#xff0c;是通过为子网提供数据链路连接来抽象出局域网的概念。在企业网中&#xff0c;一个企业级交换机一般是24口或者是48口&#xff0c;连接这些接口的终端在物理上形成一个广播域。广播域过大&#xff0c;就会导…

docker镜像中搭建FastDfs

docker镜像中搭建FastDfs 一、搭建过程二、docker端口映射三、映射的方法三、配置Tracker 和 Storage 环境&#xff1a;腾讯云服务器上 ubuntu20.04镜像 一、搭建过程 正常直接在云服务器上搭建过程参考博客&#xff1a; https://blog.csdn.net/qq_38531706/article/details/…

基于51单片机的AD/DA转换的串口通信proteus仿真(附源码)

文章目录 一、前言二、PCF85911.介绍2.原理图3.引脚介绍 三、仿真图1.未仿真时2.仿真时 四、仿真程序main.cIIC.c 五、总结 一、前言 AT89C52是一款经典的8051系列单片机&#xff0c;它通常不包含内置的模数转换器&#xff08;ADC&#xff09;或数字模拟转换器&#xff08;DAC…

模版方法详解

模板方法模式 1 概述 在面向对象程序设计过程中&#xff0c;程序员常常会遇到这种情况&#xff1a;设计一个系统时知道了算法所需的关键步骤&#xff0c;而且确定了这些步骤的执行顺序&#xff0c;但某些步骤的具体实现还未知&#xff0c;或者说某些步骤的实现与具体的环境相…

DS高阶:跳表

一、skiplist 1.1 skiplist的概念 skiplist本质上也是一种查找结构&#xff0c;用于解决算法中的查找问题&#xff0c;跟平衡搜索树和哈希表的价值是一样的&#xff0c;可以作为key或者key/value的查找模型。skiplist是由William Pugh发明的&#xff0c;最早出现于他在1990年发…

SOLIDWORKS科研版的优势

随着科技的不断进步&#xff0c;科研领域对于快捷、准确和可视化的需求也在不断增长。在这个背景下&#xff0c;SOLIDWORKS科研版应运而生&#xff0c;为科研人员提供了一款强大的工具&#xff0c;帮助他们解决复杂的问题&#xff0c;提高研究效率。 首先&#xff0c;SOLIDWOR…