Vue组件的自定义属性Props

Vue的组件相当于HTML中的自定义标签,与HTML标签属性对应的概念就是组件的Props。组件的Props是给父组件使用的,使用时需要明确指定属性的值,或者是在组件定义时,给属性提供默认值。组件对象使用Props时,要更多的地应用计算属性和侦听器去改变组件的状态和DOM结构,毕竟组件的Props对组件自己来讲是一个非具体数据。

     Vue组件的Props标准定义和推荐使用方式如下:

<script setup lang="ts">
//组件定义中属性定义
const props=defineProps<{msg: string,count:number,show:boolean,list:string[],pfun:Function
}>()console.log(props.pfun())
</script><template><div @click="pfun()"><div>{{ count }}</div><div>{{ msg }}</div><div>{{ show }}</div><div>{{ list }}</div></div>
</template>

组件推荐使用方式:

<script setup lang="ts">
import {ref} from "vue"
import HelloWorld from './components/HelloWorld.vue'const message=ref("You did it!");
const hlist=ref(["hello","wrold","vue"]);function hpfun(){console.log("The value is from father component function");return "The value is from father component function";
}
</script><template><HelloWorld :pfun="hpfun"  :count="10" msg="Yes, You did it!" :show="true" :list="hlist"></HelloWorld>
</template>

组件中属性定义时,需要指明属性的类型。

有属性定义的组件在使用时,属性可以通过静态赋值、动态赋值的方式获得初始化。静态赋值是在组件模板或DOM结构中直接给出值,仅限于字符串类型。动态赋值是通过js表达式或者使用组件的父组件定义中给出值,如上的count、show属性属于js表达式动态赋值,list、pfun属性是父组件给出值。这些赋值方式的不同仅仅是因为HTML标签的属性都是字符串的值,而js可以给出远超过字符串类型的属性值。从前端组成BOM+DOM+js的组成来看,js是动态性的支持者,DOM是静态性HTML的支持者,vue的组件在动态性上的支持是非常强的,这也带来了组件属性的多种类型和赋值初始化的问题。   

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

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

相关文章

基于C#实现十字链表

上一篇我们看了矩阵的顺序存储&#xff0c;这篇我们再看看一种链式存储方法“十字链表”&#xff0c;当然目的都是一样&#xff0c;压缩空间。 一、概念 既然要用链表节点来模拟矩阵中的非零元素&#xff0c;肯定需要如下 5 个元素(row,col,val,down,right)&#xff0c;其中&…

初识数据结构

归纳编程学习的感悟&#xff0c; 记录奋斗路上的点滴&#xff0c; 希望能帮到一样刻苦的你&#xff01; 如有不足欢迎指正&#xff01; 共同学习交流&#xff01; &#x1f30e;欢迎各位→点赞 &#x1f44d; 收藏⭐ 留言​&#x1f4dd; 熬过了我们不想要的生活&#xf…

麒麟V10服务器搭建FTP服务

概念 1.1介绍 FTP&#xff1a;File transfer protocol 文件传输协议 1.2原理 默认采用被动模式 被动模式FTP 为了解决服务器发起到客户的连接的问题&#xff0c;人们开发了一种不同的FTP连接方式。这就是所谓的被 动方式&#xff0c;或者叫做PASV&#xff0c;当客户端通…

删除巨大文本文件的最后一行

用truncate去年最后的字节数。 export file"abc.json"tail -n 1 "$file" | wc -c | xargs -I {} truncate "$file" -s -{}mac上面truncate需要安装一下。 参考&#xff1a; Remove the last line from a file in Bash - Stack Overflow

Vue路由器(详细教程)

路由&#xff1a; 1.理解&#xff1a;一个路由(route)就是一组映射关系&#xff08;key-value)&#xff0c;多个路由需要路由器&#xff08;router&#xff09;进行管理。 2.前端路由&#xff1a;key是路径&#xff0c;value是组件。 1、先安装vue-router路由 npm i vue-route…

车载通信架构 —— 传统车内通信网络LIN总线(低成本覆盖低速场景)

车载通信架构 —— 传统车内通信网络LIN总线(低成本覆盖低速场景) 我是穿拖鞋的汉子,魔都中坚持长期主义的汽车电子工程师。 老规矩,分享一段喜欢的文字,避免自己成为高知识低文化的工程师: 屏蔽力是信息过载时代一个人的特殊竞争力,任何消耗你的人和事,多看一眼都是…

go的HTTP网络编程

欢迎大家到我的博客浏览。go的HTTP网络编程 | YinKais Blog go的HTTP网络编程 1、http编程--server示例 package main ​ import ("fmt""net/http" ) ​ func main() {// 注册处理函数&#xff0c;定义 URL 路由和对应的处理函数http.HandleFunc("…

redisserver一闪而过 redis闪退解决版本

1.进入Redis根目录 2.输入redis-server 或 redis-server.exe redis.windows.conf 启动redis命令&#xff0c;看是否成功。 执 一闪而过的问题 可能是因为已启动或者其他问题&#xff0c;需要重启 先输入redis-cli.exe再输入shutdown再输入redis-server.exe redis.windows.c…

扩散模型实战(十二):使用调度器DDIM反转来优化图像编辑

推荐阅读列表&#xff1a; 扩散模型实战&#xff08;一&#xff09;&#xff1a;基本原理介绍 扩散模型实战&#xff08;二&#xff09;&#xff1a;扩散模型的发展 扩散模型实战&#xff08;三&#xff09;&#xff1a;扩散模型的应用 扩散模型实战&#xff08;四&#xff…

ajax请求接口数据和显示在页面里 Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法

$.ajax({ url:"这里是你要请求的地址", data:{"id":id}, //以键/值对的形式 async : false, dataType : "json", success : function(data) { for(int i 0; i < data.length; i) { //循环后台传过来的Json数组 var datas data…

计算机毕业设计|基于SpringBoot+MyBatis框架的电脑商城的设计与实现(用户上传头像+用户收货管理)

计算机毕业设计|基于SpringBootMyBatis框架的电脑商城的设计与实现&#xff08;用户上传头像&#xff09; 该项目分析着重于设计和实现基于SpringBootMyBatis框架的电脑商城。首先&#xff0c;通过深入分析项目所需数据&#xff0c;包括用户、商品、商品类别、收藏、订单、购物…

redisson实现分布式锁(支持redis单例/集群)

redisson实现分布式锁 前言一、引入redisson依赖二、redis 配置三、redisson 配置1.集群配置2.单例配置 四、分布式锁使用-业务层demo 前言 还是在工作中遇到的问题&#xff1a; 1&#xff1a;新增商铺信息时&#xff0c;同一个商铺有多条信息。 异步的情况&#xff0c;根据商…

NX二次开发UF_CURVE_ask_parameterization 函数介绍

文章作者&#xff1a;里海 来源网站&#xff1a;https://blog.csdn.net/WangPaiFeiXingYuan UF_CURVE_ask_parameterization Defined in: uf_curve.h int UF_CURVE_ask_parameterization(tag_t object, double param_range [ 2 ] , int * periodicity ) overview 概述 Retu…

国产Ai大模型和chtgpt3.5的比较

下面是针对国产大模型&#xff0c;腾讯混元&#xff0c;百度文心一言&#xff0c;阿里通义千问和chatgpt的比较&#xff0c;最基础的对一篇文章的单词书进行统计&#xff0c;只有文心一言和chatgpt回答差不多&#xff0c;阿里和腾讯差太多了

深度学习中的注意力机制:原理、应用与实践

深度学习中的注意力机制&#xff1a;原理、应用与实践 摘要&#xff1a; 本文将深入探讨深度学习中的注意力机制&#xff0c;包括其原理、应用领域和实践方法。我们将通过详细的解析和代码示例&#xff0c;帮助读者更好地理解和应用注意力机制&#xff0c;从而提升深度学习模…

Vue快速实践总结 · 下篇

文章目录 组件间通信方式父 --> 子通信props插槽 子 --> 父通信&#xff08;自定义事件&#xff09;任意组件通信全局事件总线消息订阅与发布 Vuex工作原理运行环境简单使用GettersmapState与mapGettersmapActions与mapMutations模块化 命名空间 VueRouter路由的作用与分…

OpenWrt Lan口上网设置

LAN口上网设置 连接上openwrt&#xff0c;我用的 倍控N5105&#xff0c;eth0&#xff0c;看到Openwrt的IP是10.0.0.1 在 网络 -> 网口配置 -> 设置好 WAN 口和 LAN 口 初次使用经常重置 openwrt 所以我设置的是 静态IP模式 - 网络 -> 防火墙 -> 常规设置 ->…

7.私信列表 + 发送列表

目录 1.私信列表 1.1 数据访问层 1.2 业务层 1.3 表现层 1.4 私信详情 2.发送列表 2.1 数据访问层 2.2 业务层 2.3 表现层 2.4 设置已读状态 1.私信列表 私信列表&#xff1a;查询当前用户的会话列表&#xff0c;每个会话只显示一条最新的私信、支持分页列表私信详情…

苹果cms搭建教程附带免费模板

准备工作: 一台服务器域名源码安装好NGINX+PHP7.0+MYSQL5.5 安装php7.0的扩展,fileinfo和 sg11,不安装网站会搭建失败。 两个扩展都全部安装好了之后 点击-服务-重载配置 这样我们的网站环境就配置完成啦 下载苹果cms 苹果cms程序github链接:选择mac10!下载即可 http…

部署Jenkins

一、介绍 Jenkins 、Jenkins概念 Jenkins是一个功能强大的应用程序&#xff0c;允许持续集成和持续交付项目&#xff0c;无论用的是什么平台。这是一个免费的源代码&#xff0c;可以处理任何类型的构建或持续集成。集成Jenkins可以用于一些测试和部署技术。Jenkins是一种软件允…