vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值?

vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值?

文章目录

  • vue学习笔记-03-浅谈组件-概念,入门,如何用props给组件传值?
  • 什么是组件?
  • 为什么要使用组件?
  • 如何使用组件呢?
    • hello,组件
    • 如何给组件里面传递参数呢?
    • 组件的注册分为全局注册和局部注册
    • 思考一下,如果是多个属性传入组件呢?

什么是组件?

  组件是可复用的 Vue 实例,说白了就是一组可以重复使用的模板,跟 JSTL 的自定义标签、Thymeleaf 的 th:fragment等框架有着异曲同工之妙。通常一个应用会以一棵嵌套的组件树的形式来组织:

在这里插入图片描述

为什么要使用组件?

  你可以将组件进行任意次数的复用,减少代码量,提高代码的重用性,比如侧边栏,搜索框之类的。
  组件系统是Vue.js其中一个重要的概念,它提供了一种抽象,让我们可以使用独立可复用的小组件来构建大型应用,任意类型的应用界面都可以抽象为一个组件树。

如何使用组件呢?

vue.js官网讲解组件

下面我们一起来看看怎么初步使用它吧:

hello,组件

 <script type="text/javascript">// 先注册组件Vue.component('my-component-li', {template: '<li>Hello li</li>'});// 再实例化 Vuevar vm = new Vue({el: '#vue'});</script><div id="vue"><ul><!--使用自定义的组件--><my-component-li></my-component-li></ul></div>
  • Vue.component():注册组件
  • my-component-li:自定义组件的名字
  • template:组件的模板

如何给组件里面传递参数呢?

  向上面那种一点用都没有223,因为没有参数传进去,意义性不大,如果需要传递参数进去,则需要props属性了

  ps:props里面的属性值不能大写

 <script type="text/javascript">// 先注册组件Vue.component('my-component-li', {props: ['item'],template: '<li>Hello {{item}}</li>'});// 再实例化 Vuevar vm = new Vue({el: '#vue',data: {items: ["张三", "李四", "王五"]}});</script><div id="vue"><ul><my-component-li v-for="item in items" v-bind:item="item"></my-component-li></ul></div>

说明:

  • v-for=“item in items”:遍历 Vue 实例中定义的名为 items 的数组,并创建同等数量的组件
  • v-bind:item=“item”:将遍历的 item 项绑定到组件中 props 定义的名为 item 属性上;= 号左边的 item 为 props 定义的属性名,右边的为 item in items 中遍历的 item 项的值
  • 可以这么理解,数据的流向是:先从data种items流向了v-for中的item,然后再由item流向了props中的item。

组件的注册分为全局注册和局部注册

全局注册:

Vue.component('my-component-name', {// ... options ...})

  全局注册的组件可以用在其被注册之后的任何 (通过 new Vue) 新创建的 Vue 根实例,也包括其组件树中的所有子组件的模板中。
  到目前为止,关于组件注册你需要了解的就这些了,如果你阅读完本页内容并掌握了它的内容,我们会推荐你再回来把组件注册读完。

思考一下,如果是多个属性传入组件呢?

比如:

 new Vue({el: '#blog-post-demo',data: {posts: [{ id: 1, title: 'My journey with Vue' },{ id: 2, title: 'Blogging with Vue' },{ id: 3, title: 'Why Vue is so fun' }]}})

这个时候怎么动态绑定呢?

   <blog-postv-for="post in posts"v-bind:key="post.id"v-bind:title="post.title"></blog-post>

  如上所示,你会发现我们可以使用 v-bind 来动态传递 prop。这在你一开始不清楚要渲染的具体内容,比如从一个 API 获取博文列表的时候,是非常有用的。

  到目前为止,关于 prop 你需要了解的大概就这些了,如果你阅读完本页内容并掌握了它的内容,我们会推荐你再回来把 prop 读完。

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

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

相关文章

iscsi-分区类型

iSCSI简介(Internet SCSI)&#xff1a; iSCSI 小型计算机系统接口&#xff0c;IBM公司研发&#xff0c;用于在IP网络上运行SCSI协议&#xff1b;解决了 SCSI需要直连存储设备的局限性&#xff1b;可以不停机扩展存储容量&#xff0c;iSCSI 将 SCSI 接口与 Ethernet 技术结合&am…

设计模式1——设计模式的原则

1.从面向对象说起 ~~~~~~变化是代码复用的天敌&#xff0c;面向对象的设计语言的优势就是抵御变化&#xff01;这里的所谓抵御变化&#xff0c;不是说采用面向对象的设计语言&#xff0c;就没有变化&#xff0c;而是将变化的范围降到最小。 ~~~~~~之前我们所认识的面向对象的语…

盘点:2021年度物理学十大突破|《物理世界》

来源&#xff1a;物理世界作者&#xff1a;哈米什约翰斯顿&#xff08;Hamish Johnston&#xff09;译者&#xff1a;王晓涛、乔琦2021年12月14日&#xff0c;《物理世界》&#xff08;Physics World&#xff09;编辑从其网站发表的近600项研究进展中评选出了年度物理学领域十大…

操作系统学习笔记-01-1.1课程概述

此课程来自于b站操作系统_清华大学(向勇、陈渝)&#xff0c;博客作为博主手打&#xff0c;当作参考笔记&#xff0c;回头复习223 1.1课程概述 课程简介 什么是操作系统 为什么学习以及如何学习操作系统 操作系统的实例&#xff0c;历史和结构介绍 基本概念及原理 操作系统…

Python实现二叉树的遍历

二叉树是有限个元素的集合&#xff0c;该集合或者为空、或者有一个称为根节点&#xff08;root&#xff09;的元素及两个互不相交的、分别被称为左子树和右子树的二叉树组成。 二叉树的每个结点至多只有二棵子树(不存在度大于2的结点)&#xff0c;二叉树的子树有左右之分&#…

tdms打开闪退问题

问题&#xff1a;tdms打开闪退 解决方法如下&#xff0c;打开excel&#xff0c;在菜单栏中点【文件】 左下方进入【选项】&#xff0c;然后在excel选项中点击【加载项】 然后在下方的管理&#xff0c;选择【COM加载项】&#xff0c;点击【转到】 将NI的TDMS【Add-in】的打勾&a…

操作系统学习笔记-02-1.2-什么是操作系统

1.2什么是操作系统 没有一个完整&#xff0c;精确&#xff0c;公认的定义从功能和特点上来介绍操作系统 用户角度上&#xff0c;操作系统是一个控制软件管理应用程序为应用程序提供服务杀死应用程序 资源管理管理外设&#xff0c;分配资源 操作系统架构层次 硬件之上应用程序之…

大脑活动与认知: 热力学与信息论的联系

来源&#xff1a;集智俱乐部作者&#xff1a;Guillem Collell、Jordi Fauquet译者:张澳审校&#xff1a;刘培源编辑&#xff1a;邓一雪导语信息和能量之间的关系已经在物理学、化学和生物学中得到了广泛的研究。然而&#xff0c;这种联系并没有在神经科学领域形式化。2015年&am…

我为能准时下班而做的准备,以及由此的收获,同时总结下不足

可能有人会说&#xff0c;做IT的想准时下班很难&#xff0c;尤其是在互联网公司。有些外企或国企倒能准时下班&#xff0c;原因是公司更像养老院。 其实这里存在个误区&#xff1a;能否准时下班其实和工作效率和质量有关&#xff0c;取决于自己&#xff0c;而不在于其它因素。公…

Ubuntu下进行截图的快捷方式

shiftFnPRT SC 截图结果保存在用户下的相册中

离散数学学习笔记-01-随机试验与随机事件

文章目录1.1.1随机试验与随机事件引言随机事件1.1.2.样本空间与事件的集合表示基本概念1.1.3事件之间的关系1.包含2.并&#xff08;和&#xff09;引入概率论的三个要素&#xff1a;1.1.1随机试验与随机事件 引言 确定性&#xff08;必然&#xff09;&#xff1a;一定发生&am…

18-ESP8266 SDK开发基础入门篇--TCP 服务器 RTOS版,串口透传,TCP客户端控制LED

https://www.cnblogs.com/yangfengwu/p/11112015.html 先规定一下协议 aa 55 02 01 F1 4C 控制LED点亮 F1 4C为CRC高位和低位aa 55 02 00 30 8C 控制LED熄灭 30 8C为CRC高位和低位 aa 55 03 占空比(四字节 高位在前,低位在后) CRC校验高位,CRC校验低位 预留一个问题 我用客…

Ubuntu下的git使用指南

1.创建账号&#xff0c;绑定邮箱 在Git或者Gitee中创建一个Git账号或者Gitee账号&#xff0c;绑定邮箱&#xff0c;Ubuntu下的git命令对Git或者Gitee都有效。 2.安装git Ubuntu下下载git命令&#xff1a; sudo apt-get install git在下载完之后&#xff0c;可以通过git --v…

人类、动物和人工智能意识的新理论

来源&#xff1a;ScienceAI编译&#xff1a;萝卜皮德国波鸿鲁尔大学&#xff08;RUB&#xff09;的两名研究人员提出了一种新的意识理论。他们一直在探索意识的本质&#xff0c;大脑如何产生意识以及在何处产生意识&#xff0c;以及动物、人工智能是否也有意识等问题。新概念将…

算法日记-01-算法和数据结构概览

算法日记-01-算法和数据结构概览 文章目录算法日记-01-算法和数据结构概览1.数据结构2.算法3.如何解题&#xff1f;4.刷题方法5.小结1.数据结构 一维 基础&#xff1a;数组arry&#xff08;string&#xff09;&#xff0c;链表 linked list高级&#xff1a;栈 stack&#xff0…

ffmpeg——简单播放器代码

1.媒体文件播放总体过程 媒体文件——>解复用——>解码——>调用播放接口——>播放 2.解复用 2.1 什么是解复用&#xff1f; 解复用&#xff1a;将媒体文件分解为视频流和音频流 avformat_open_input() /*打开对应的文件&#xff0c;查找对应的解复用器&…

Github项目汇总

阿里 https://github.com/alibaba腾讯 https://github.com/AlloyTeam百度 https://github.com/baidufehttps://github.com/ecomfe网易 https://github.com/netease豆瓣 https://github.com/douban大众点评 https://github.com/dianping转载于:https://www.cnblogs.com/annwyn/p…

Nature公布2022年值得关注的七大科学事件, 中国一项入选!

来源&#xff1a;科技日报 记者 刘霞 文中图片来自《自然》杂志官网&#xff0c;版权属于原作者&#xff0c;仅用于学术分享尽管今年新冠疫情仍然肆虐&#xff0c;给人类带来不少悲剧和灾难&#xff0c;但“每朵乌云都镶有金边”&#xff01;新冠疫苗成为抗击疫情的有力武器、…

计算机网络学习笔记-01-概念,组成,功能,分类

计算机网络-2019 王道考研 计算机网络-1-概念&#xff0c;组成&#xff0c;功能&#xff0c;分类 文章目录1.概念&#xff0c;组成&#xff0c;功能&#xff0c;分类1.1概念1.2功能1.3组成部分1.3分类1.4思维导图总结1.概念&#xff0c;组成&#xff0c;功能&#xff0c;分类 …

面试题目

一、请写出以下代码运行结果 1 var str hello; 2 (function(){ 3 conso.log(str) 4 var str world 5 })() 结果是&#xff1a;undefined&#xff1b; 二、请写出以下代码运行结果 1 function fun(){2 var a function(){3 console.log(1) 4 }5 retur…