【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; ⏹…
阅读更多...
【SH】Xiaomi9刷Windows10系统研发记录 、手机刷Windows系统教程、小米9重装win10系统

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

文章目录 参考资料云盘资料软硬件环境手机解锁刷机驱动绑定账号和设备解锁手机 Mindows工具箱安装工具箱和修复下载下载安卓和woa资源包第三方Recovery 一键安装Windows准备工作创建分区安装系统 效果展示Windows和Android一键互换Win切换安卓安卓切换Win 删除分区 参考资料 解…
阅读更多...
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;…
阅读更多...
【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;任何元素都无法遮盖住它。当其…
阅读更多...
Kotlin 快速上手指南：从安装 IntelliJ IDEA 到编写第一个程序

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

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

Docker 部署 Typecho

1. 官网 https://typecho.org/插件 & 主题 https://github.com/typecho-fans/plugins https://typechx.com/ https://typecho.work/2. 通过 compose 文件安装 github官网&#xff1a; https://github.com/typecho/Dockerfile 新建一个目录&#xff0c;存放 typecho 的相…
阅读更多...
2025/1/12 复习JS

2025/1/12 复习JS

我乞求你别再虚度光阴 ▶ 空心 --------------------------------------------------------------------------------------------------------------------------------- 摘自哔哩哔哩听课笔记。 01 上篇&#xff1a;核心语法 1.基于页面效果的操作 <!DOCTYPE html>…
阅读更多...
【初识扫盲】厚尾分布

【初识扫盲】厚尾分布

厚尾分布&#xff08;Fat-tailed distribution&#xff09;是一种概率分布&#xff0c;其尾部比正态分布更“厚”&#xff0c;即尾部的概率密度更大&#xff0c;极端值出现的概率更高。 一、厚尾分布的特征 尾部概率大 在正态分布中&#xff0c;极端值&#xff08;如距离均值很…
阅读更多...
机组存储系统

机组存储系统

局部性 理论 程序执行&#xff0c;会不均匀访问主存&#xff0c;有些被频繁访问&#xff0c;有些很少被访问 时间局部性 被用到指令&#xff0c;不久可能又被用到 产生原因是大量循环操作 空间局部性 某个数据和指令被使用&#xff0c;附近数据也可能使用 主要原因是顺序存…
阅读更多...
Transformer创新模型！Transformer+BO-SVR多变量回归预测，添加气泡图、散点密度图（Matlab）

Transformer创新模型！Transformer+BO-SVR多变量回归预测，添加气泡图、散点密度图（Matlab）

Transformer创新模型&#xff01;TransformerBO-SVR多变量回归预测&#xff0c;添加气泡图、散点密度图&#xff08;Matlab&#xff09; 目录 Transformer创新模型&#xff01;TransformerBO-SVR多变量回归预测&#xff0c;添加气泡图、散点密度图&#xff08;Matlab&#xff0…
阅读更多...
31_搭建Redis分片集群

31_搭建Redis分片集群

Redis的主从复制模式和哨兵模式可以解决高可用、高并发读的问题。但是依然有两个问题没有解决：海量数据存储问题、高并发写的问题。由于数据量过大，单个master复制集难以承担，因此需要对多个复制集进行集群，形成水平扩展每个复制集只负责存储整个数据集的一部分，这就是Red…
阅读更多...
OpenGL —— 基于Qt的视频播放器 - ffmpeg硬解码，QOpenGL渲染yuv420p或nv12视频（附源码）

OpenGL —— 基于Qt的视频播放器 - ffmpeg硬解码，QOpenGL渲染yuv420p或nv12视频（附源码）

运行效果 工程说明 源码 vertex.glsl
阅读更多...
ASP.NET Core - 日志记录系统(二)

ASP.NET Core - 日志记录系统(二)

ASP.NET Core - 日志记录系统&#xff08;二&#xff09; 2.4 日志提供程序2.4.1 内置日志提供程序2.4.2 源码解析 本篇接着上一篇 ASP.NET Core - 日志记录系统(一) 往下讲&#xff0c;所以目录不是从 1 开始的。 2.4 日志提供程序 2.4.1 内置日志提供程序 ASP.NET Core 包括…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023