【Vue】Vue组件--上

目录

一、组件基础

二、组件的嵌套关系

1. 基础架构

2. 嵌套 

三、组件注册方式

1. 局部注册：

2. 全局注册：

四、组件传递数据

1. 基础架构

2. 传递多值

3.  动态传递数据

五、组件传递多种数据类型

1. Number

2. Array

3. Object

六、组件传递Props的校验

 1. 默认值

2. 必选项

一、组件基础

        组件最大的优势就是可复用性。

        当使用构建步骤时，我们一般将vue组件定义在一个单独的.vue文件当中，这就被叫做单文件组织（SFC）

         组件组成结构 ----> 在components文件当中新建文件MyApp.vue

<template><div class="container">{{ message }}</div>
</template>
<script>export default{data(){return{message:'组件基础组成'}}}
</script>
<!-- 让当前样式只在当前组件中生效 ，如果不加scoped那么.container将会是全局样式在任何组件当中使用-->
<style scoped>.container{font-size: 30px;color: red;}
</style>

        组件引用结构-----在App.vue当中设置如下属性:

<script>//第一步引入组件import MyApp  from './components/MyApp.vue';export default{//第二步：注册组件components:{MyApp}}
</script>
<template><!--第三步:显示组件--><MyApp/>
</template>

二、组件的嵌套关系

 

        组件允许我们将UI划分为独立的、可重用的部分，并且可以对每个部分进行单独的思考。在实际应用中，组件常常被组织成层层嵌套的树状结构

        这和我们嵌套HTML元素的方式类似，Vue实现了自己的组件模型，使我们可以在每个组件内封装自定义内容与逻辑。

        新建pages文件夹，并创建以下文件‘

1. 基础架构

Header.vue

<template><h3>Header</h3>
</template>
<style scoped>h3{width: 100%;height: 120px;border: 4px solid #333;text-align: center;line-height: 100px;box-sizing: border-box;}
</style>

在App.vue当中注册

<script>import Header from './components/Header.vue';export default{data(){},components:{Header}}
</script>
<template><Header/>
</template>

 Main.vue:

<template><div class="main"><h4>Main</h4></div></template><style scoped>.main{float: left;width: 60%;height: 400px;border: 4px solid #333;text-align: center;line-height: 100px;box-sizing: border-box;}.main h4{text-align: center;background-color: beige;}
</style>

 Aside.vue:

<template><div class="aside"><h4>Aside</h4></div></template><style scoped> .aside{float: right;width: 30%;height: 400px;border: 4px solid #333;text-align: center;line-height: 100px;box-sizing: border-box;}
</style>

2. 嵌套 

新建Article.vue:

<template><h5>Article</h5>
</template>
<style>h5{width:80%;margin:0 auto;text-align: center;line-height: 50px;box-sizing: border-box;margin-top: 20px;background:#999;}
</style>

在main.vue里引用article.vue

<template><div class="main"><h4>Main</h4><Article/><Article/></div></template>
<script>import Article from './Article.vue';export default{components:{Article}}
</script>
<style scoped>.main{float: left;width: 60%;height: 400px;border: 4px solid #333;text-align: center;line-height: 100px;box-sizing: border-box;}.main h4{text-align: center;background-color: beige;}
</style>

新建item.vue:

<template><h5>Item</h5>
</template>
<style scoped>h5{width:80%;margin: 0 auto;text-align: center;line-height: 100px;box-sizing: border-box;margin-top: 10px;background:#999;}   
</style>

在aside.vue里引用item.vue:

<template><div class="aside"><h4>Aside</h4><Item/><Item/></div></template>
<script>import Item from './Item.vue';export default{components:{Item}}
</script>
<style scoped> .aside{float: right;width: 30%;height: 400px;border: 4px solid #333;text-align: center;line-height: 100px;box-sizing: border-box;}
</style>

最终效果：

三、组件注册方式

        一个Vue组件在使用前需要先被“注册”，这样Vue才能在渲染模板时找到其对应的实现。组件注册有两种方式：全局注册和局部注册

1. 局部注册：

        前边讲的方案就是局部注册

2. 全局注册：

我们这里使用Header.vue来进行全局注册，

①:那么首先在App.vue当中取消局部注册。

②:在main.js当中设置全局注册方式

③：最终在哪里需要就在哪里引入

全局注册虽然很方便，但有以下几个问题：

        1.全局注册，但并没有被使用的组件无法在生产打包时被自动移除（也叫“tree-shaking”)。如果你全局注册了一个组件，即使它并没有被实际使用，它仍然会出现在打包后的JS文件中

        2.全局注册在大型项目中使项目的依赖关系变得不那么明确。在父组件中使用子组件时，不太容易定位子组件的实现。和使用过多的全局变量一样，这可能会影响应用长期的可维护性

局部注册需要使用components选项。

四、组件传递数据

        组件与组件之间不是完全独立的，而是有交集的，那就是组件与组件之间是可以传递数据的传递数据的解决方案就是props

1. 基础架构

        首先我们新建一个Parent.vue：

<template><h3>Parent</h3>
</template>
<script>export default{data(){return{}} }
</script>

其次我们再新建Child.vue

<template><h3>Child</h3>
</template>
<script>export default{data(){return{}}}
</script>

我们让Parent.vue给Child.vue传值，不过在此之前我们先让Parent成为Child的父组件。

 

2. 传递多值

也可以传递多个值

 

3.  动态传递数据

 

注意事项：

        props 传递数据，只能从父级传递到子级，不能反其道而行

五、组件传递多种数据类型

        通过props传递数据，不仅可以传递字符串类型的数据，还可以是其他类型，例如：数字、对象、数组等。但实际上任何类型的值都可以作为props的值被传递。

1. Number

parent.vue：

<template><h3>Parent</h3><Child :title="message" :age="age"></Child>
</template>
<script>import Child from './Child.vue'export default{data(){return{message:"我是动态的数据！！！",age:20}},components:{Child}}
</script>

Child.vue：

<template><h3>Child</h3><p>{{ title }}</p><p>{{ age }}</p>
</template>
<script>export default{data(){return{}},props:["title","age"]}
</script>

2. Array

parent.vue:

<template><h3>Parent</h3><Child :title="message" :age="age" :names="names"></Child>
</template>
<script>import Child from './Child.vue'export default{data(){return{message:"我是动态的数据！！！",age:20,names:["张三","李四","王五"]}},components:{Child}}
</script>

child.vue:

<template><h3>Child</h3><p>{{ title }}</p><p>{{ age }}</p><ul><li v-for="(item,index) of names" :key="index">{{ item }}</li></ul>
</template>
<script>export default{data(){return{}},props:["title","age","names"]}
</script>

3. Object

parent.vue:

<template><h3>Parent</h3><Child :title="message" :age="age" :names="names" :userInfo="userInfo"></Child>
</template>
<script>import Child from './Child.vue'export default{data(){return{message:"我是动态的数据！！！",age:20,names:["张三","李四","王五"],userInfo:{name:"admin",age:20}}},components:{Child}}
</script>

child.vue:

<template><h3>Child</h3><p>{{ title }}</p><p>{{ age }}</p><ul><li v-for="(item,index) of names" :key="index">{{ item }}</li></ul><p>{{ userInfo.name }}</p><p>{{ userInfo.age }}</p>
</template>
<script>export default{data(){return{}},props:["title","age","names","userInfo"]}
</script>

六、组件传递Props的校验

        Vue组件可以更细致地声明对传入的props的校验要求。

以下例子为接收  String  类型传输  number  控制台警告：

<script>
import ComponentB from './ComponentB.vue';
export default{data(){return{title:20}},components:{ComponentB}
}
</script>
<style>
</style>
<template><h3>ComponentA</h3><ComponentB :title="title"/></template>
<template><h3>ComponentB</h3><p>{{ title }}</p>
</template>
<script>
export default{data(){return{}},props:{title:{type:String}}
}
</script>

 

 可以接收多种类型

props:{title:{type:[String,Number,Array,Object]}
}

 1. 默认值

        模拟情况：传递数据的时候并没有真实传递。

         数字和字符串可以直接default，但是如果是数组和对象，必须通过工厂函数返回默认值。

 

<template><h3>ComponentA</h3><ComponentB :title="title" :age="age" :names="names"/>
</template><script>import ComponentB from './ComponentB.vue';export default{data(){return{title:"测试",//age:20,//names:["Tom","Bob"]}},components:{ComponentB}
}
</script>
________________________________________________________________________________
<template><h3>ComponentB</h3><p>{{ title }}</p><p>{{ age }}</p><ul><li v-for="(name,index) of names" :key="index">{{ name }}</li></ul>
</template><script>
export default{data(){return{}},props:{title:{type:[String,Number,Array,Object]},age:{type:Number,default:0},//数字和字符串可以直接default，但是如果是数组和对象，必须通过工厂函数返回默认值names:{type:Array,default(){return ["xxx"]}}}
}
</script>

2. 必选项

        没有传值就会提示警告。

 

<template><h3>ComponentA</h3><ComponentB :title="title" :age="age" :names="names"/>
</template><script>import ComponentB from './ComponentB.vue';export default{data(){return{// title:"测试",age:20,names:["Tom","Bob"]}},components:{ComponentB}
}
</script>
<template><h3>ComponentB</h3><p>{{ title }}</p><p>{{ age }}</p><ul><li v-for="(name,index) of names" :key="index">{{ name }}</li></ul>
</template><script>
export default{data(){return{}},props:{title:{type:[String,Number,Array,Object],required:true},age:{type:Number,default:0},//数字和字符串可以直接default，但是如果是数组和对象，必须通过工厂函数返回默认值names:{type:Array,default(){return ["xxx"]}}}
}
</script>

注意：

        props 是只读的，不允许修改父元素传递过来的数据。

<template><h3>ComponentB</h3><p>{{ title }}</p><p>{{ age }}</p><ul><li v-for="(name,index) of names" :key="index">{{ name }}</li></ul><button @click="update">update</button>
</template><script>
export default{data(){return{}},props:{title:{type:[String,Number,Array,Object],required:true},age:{type:Number,default:0},//数字和字符串可以直接default，但是如果是数组和对象，必须通过工厂函数返回默认值names:{type:Array,default(){return ["xxx"]}}},methods:{update(){console.log(this.title);this.title="新数据"}}
}
</script>

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

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

相关文章

unity下载newtonsoft-json

unity下载newtonsoft-json

Package Manager&#xff0c;输入com.unity.nuget.newtonsoft-json 右键Assets-Reinport All
阅读更多...
SpringBoot项目实战（40）--Beetl网页开发在控制层使用通用方法映射前端不同路径的网页

SpringBoot项目实战（40）--Beetl网页开发在控制层使用通用方法映射前端不同路径的网页

在SpringBoot中使用Beetl做前端页面&#xff0c;后端如何使用Controller映射前端不同的页面&#xff0c;不需要为每个前端页面单独增加控制层方法&#xff1f; 因为前端页面比较多&#xff0c;每个前端页面对应一个独立Controller方法也是不现实的&#xff0c;总不能每增加一个…
阅读更多...
【自动化测试】—— Appium安装配置保姆教程（图文详解）

【自动化测试】—— Appium安装配置保姆教程（图文详解）

目录 一. 环境准备 二. JDK安装 1. 下载JDK 2. 安装JDK 3. 配置环境 4. 验证安装 三. Android SDK安装 1. 下载Android SDK 2. 安装Android SDK 3. 安装工具 4. 配置环境 5. 验证安装 四. NodeJS安装 1. 下载NodeJS 2. 安装NodeJS 3. 验证安装 4. 安装淘宝镜像…
阅读更多...
Oracle 终止正在执行的SQL

Oracle 终止正在执行的SQL

目录 一. 背景二. 操作简介三. 投入数据四. 效果展示 一. 背景 项目中要求进行性能测试&#xff0c;需要向指定的表中投入几百万条数据。 在数据投入的过程中发现投入的数据不对&#xff0c;需要紧急停止SQL的执行。 二. 操作简介 &#x1f449;需要DBA权限&#x1f448; ⏹…
阅读更多...
二、智能体强化学习——深度强化学习核心算法

二、智能体强化学习——深度强化学习核心算法

2.1 DQN 系列及其改进 2.1.1 背景与动机 在经典强化学习中（如 Q-Learning），如果状态空间或动作空间非常大乃至连续，那么用一个表格来存储 Q ( s , a ) Q(s,a) Q(s,
阅读更多...
【SH】Xiaomi9刷Windows10系统研发记录 、手机刷Windows系统教程、小米9重装win10系统

【SH】Xiaomi9刷Windows10系统研发记录 、手机刷Windows系统教程、小米9重装win10系统

文章目录 参考资料云盘资料软硬件环境手机解锁刷机驱动绑定账号和设备解锁手机 Mindows工具箱安装工具箱和修复下载下载安卓和woa资源包第三方Recovery 一键安装Windows准备工作创建分区安装系统 效果展示Windows和Android一键互换Win切换安卓安卓切换Win 删除分区 参考资料 解…
阅读更多...
PHP语言的多线程编程

PHP语言的多线程编程

PHP语言的多线程编程 引言 在现代Web开发中&#xff0c;PHP以其简洁和易用性广受欢迎。它常用于构建动态网站和应用程序。然而&#xff0c;PHP本身是单线程的&#xff0c;这意味着它在处理多个任务时可能会受到性能限制。随着互联网的发展&#xff0c;对高并发、高可用性和实…
阅读更多...
MySQL从库 Last_SQL_Errno: 1197 问题处理过程

MySQL从库 Last_SQL_Errno: 1197 问题处理过程

记录一个遇到过的错误&#xff0c;今天整理一下。 问题 MySQL error code MY-001197 (ER_TRANS_CACHE_FULL): Multi-statement transaction required morethan max_binlog_cache_size bytes of storage; increase this mysqld variable and try again报错很明显是max_binlog_…
阅读更多...
Apache Spark中与数据分区相关的配置和运行参数

Apache Spark中与数据分区相关的配置和运行参数

Apache Spark中与数据分区相关的配置和运行参数涉及多个方面&#xff0c;包括动态分区设置、分区数设置、Executor与并行度配置等。合理配置这些参数可以显著提高Spark作业的执行效率和资源利用率。在实际应用中&#xff0c;建议根据业务需求和计算集群的特性进行相应的调整和测…
阅读更多...
MWORKS 2025a 直播回顾 | 第二期：M语言计算环境重磅更新

MWORKS 2025a 直播回顾 | 第二期：M语言计算环境重磅更新

MWORKS.Syslab首次推出时已实现基于Julia语言的科学计算环境&#xff0c;尽管如此&#xff0c;仍有大量工程师团队坚持使用M语言相关软件。除了使用习惯和学习语言等问题&#xff0c;更深层的原因在于大量历史代码资产复用的问题。为了解决这一关键问题&#xff0c;同元软控在后…
阅读更多...
晨辉面试抽签和评分管理系统之八：随机编排考生的面试批次(以教师资格考试面试为例)

晨辉面试抽签和评分管理系统之八：随机编排考生的面试批次(以教师资格考试面试为例)

晨辉面试抽签和评分管理系统&#xff08;下载地址:www.chenhuisoft.cn&#xff09;是公务员招录面试、教师资格考试面试、企业招录面试等各类面试通用的考生编排、考生入场抽签、候考室倒计时管理、面试考官抽签、面试评分记录和成绩核算的面试全流程信息化管理软件。提供了考生…
阅读更多...
专用小软件，完全免费，非常丝滑

专用小软件，完全免费，非常丝滑

今天给大家介绍一个专门将PDF数电发票合并打印的软件&#xff0c;这个软件可以批量操作&#xff0c;完全免费没有任何的广告。 电子发票专用批量打印工具 免费批量使用 软件无需安装&#xff0c;解压之后双击这个图标就能直接使用了。 点击右上角的加号&#xff0c;选中需要打…
阅读更多...
《leetcode-runner》如何手搓一个debug调试器——架构

《leetcode-runner》如何手搓一个debug调试器——架构

本文主要聚焦leetcode-runner对于debug功能的整体设计&#xff0c;并讲述设计原因以及存在的难点 设计引入 让我们来思考一下&#xff0c;一个最简单的调试器需要哪些内容 首先&#xff0c;它能够接受用户的输入 其次&#xff0c;它能够读懂用户想让调试器干嘛&#xff0c;…
阅读更多...
电商项目-基于ElasticSearch实现商品搜索功能(三)

电商项目-基于ElasticSearch实现商品搜索功能(三)

本系列文章主要介绍基于 Spring Data Elasticsearch 实现商品搜索的后端代码&#xff0c;介绍代码逻辑和代码实现。 主要实现功能&#xff1a;根据搜索关键字查询、条件筛选、规格过滤、价格区间搜索、搜索查询分页、搜索查询排序、高亮查询。 主要应用技术:canal&#xff0c;…
阅读更多...
C++ using(八股总结)

C++ using(八股总结)

using作用&#xff1a; 类型别名using声明using指示 类型别名 using 可以用来创建类型别名&#xff0c;替代传统的 typedef。这在定义复杂类型时尤其有用&#xff0c;例如模板类型。 // 使用 typedef 创建类型别名 typedef long long ll;// 使用 using 创建类型别名 using …
阅读更多...
linux mysql 备份

linux mysql 备份

直接上代码 一&#xff0c;安装cron 1 安装cron sudo yum install cronie2 启动cron sudo systemctl start crond3 设置开机启动 sudo systemctl enable crond4 查看任务 crontab -l 没有任务则显示&#xff1a;no crontab for root二&#xff0c;备份脚本 #!/bin/bash # 备份…
阅读更多...
【0x005B】HCI_Write_Default_Erroneous_Data_Reporting命令详解

【0x005B】HCI_Write_Default_Erroneous_Data_Reporting命令详解

目录 一、命令概述 二、命令格式及参数 2.1. HCI_Write_Default_Erroneous_Data_Reporting命令格式 2.2. Erroneous_Data_Reporting 三、生成事件及参数 3.1. HCI_Command_Complete事件 3.2. 状态码（Status） 四、命令执行流程 4.1. 命令发起阶段（主机端） 4.2. 命…
阅读更多...
uniapp 小程序 textarea 层级穿透，聚焦光标位置错误怎么办？

uniapp 小程序 textarea 层级穿透，聚焦光标位置错误怎么办？

前言 在开发微信小程序时&#xff0c;使用 textarea 组件可能会遇到一些棘手的问题。最近我在使用 uniapp 开发微信小程序时&#xff0c;就遇到了两个非常令人头疼的问题&#xff1a; 层级穿透&#xff1a;由于 textarea 是原生组件&#xff0c;任何元素都无法遮盖住它。当其…
阅读更多...
FLASK创建下载

FLASK创建下载

html用a标签 <!-- Button to download the image --> <a href"{{ url_for(download_file, filenameimage.png) }}"><button>Download Image</button> </a> 后端&#xff1a;url_for双大括号即是用来插入变量到模板中的语法。也就是绑…
阅读更多...
Kotlin 快速上手指南：从安装 IntelliJ IDEA 到编写第一个程序

Kotlin 快速上手指南：从安装 IntelliJ IDEA 到编写第一个程序

文章目录 什么是kotlinIntelliJ IDEA安装 IntelliJ IDEA创建 Kotlin 项目运行 Kotlin 程序更改进入后默认打开上一次项目的设置打开 IntelliJ IDEA进入设置：重新启动 IntelliJ IDEA：快速学习Kotlin变量声明类型推断条件表达式定义函数单表达式函数when 表达式when 语句的基本…
阅读更多...
最新文章

Copyright @ 2022~2023