vue组件（Ⅰ）

server/2025/1/16 11:34:11/

目录

引入

一、组件基础

vue-toc" style="margin-left:40px;">1.组件组成结构在components文件当中新建文件MyApp.vue

vue%E5%BD%93%E4%B8%AD%E8%AE%BE%E7%BD%AE%E5%A6%82%E4%B8%8B%E5%B1%9E%E6%80%A7-toc" style="margin-left:40px;">2.组件引用结构-----在App.vue当中设置如下属性

 二、组件的嵌套关系

vue-toc" style="margin-left:40px;">1.Header.vue

vue-toc" style="margin-left:40px;">2.Main.vue

vue-toc" style="margin-left:40px;">3.Aside.vue

vue-toc" style="margin-left:40px;">4.Article.vue

vue%E5%BD%93%E4%B8%AD%E6%B3%A8%E5%86%8C-toc" style="margin-left:40px;">在Main.vue当中注册

vue-toc" style="margin-left:40px;">5.Itme.vue

vue%E5%BD%93%E4%B8%AD%E6%B3%A8%E5%86%8C-toc" style="margin-left:40px;">在Aside.vue当中注册

 三、组件注册方式

全局注册：

vue%E5%BD%93%E4%B8%AD%E5%8F%96%E6%B6%88%E5%B1%80%E9%83%A8%E6%B3%A8%E5%86%8C%E3%80%82-toc" style="margin-left:80px;">①:那么首先在App.vue当中取消局部注册。

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

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

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

 四、组件传递数据

vue-toc" style="margin-left:40px;">1.首先我们新建一个Parent.vue

vue-toc" style="margin-left:40px;">2.其次我们再新建Child.vue

3.让Parent成为Child的父组件

​编辑也可以传递多个值

动态传递数据 

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

1.Number

vue-toc" style="margin-left:80px;">①parent.vue

vue-toc" style="margin-left:80px;">②Child.vue

vue-toc" style="margin-left:80px;">③App.vue

2.Array

vue-toc" style="margin-left:80px;">①Parent.vue

vue-toc" style="margin-left:80px;">②Child.vue

vue%E4%B8%8D%E7%94%A8%E4%BD%9C%E5%87%BA%E4%BF%AE%E6%94%B9-toc" style="margin-left:80px;">③App.vue不用作出修改

3.Object

vue-toc" style="margin-left:80px;">①Parent.vue

vue-toc" style="margin-left:80px;">②Child.vue

vue%E4%B8%8D%E7%94%A8%E5%81%9A%E5%87%BA%E4%BF%AE%E6%94%B9-toc" style="margin-left:80px;">③App.vue不用做出修改

引入

经过前面对vue的学习，接下来引进vue很重要的一个板块---vue组件的概念。

为什么引进组件呢？

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

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

接下来的讲解还是以例子以及代码实现的结果为例进行展示。

一、组件基础

vue">1.组件组成结构在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>

vue%E5%BD%93%E4%B8%AD%E8%AE%BE%E7%BD%AE%E5%A6%82%E4%B8%8B%E5%B1%9E%E6%80%A7">2.组件引用结构-----在App.vue当中设置如下属性

【框架：】

<script>//第一步引入组件import MyApp  from './components/MyApp.vue';export default{//第二步：注册组件components:{MyApp  //这里面的MyApp来自于import里面的MyApp（类似于mysql里面的as起别名）}}
</script>
<template><!--第三步:显示组件--><MyApp/>
</template>

得到结果：

解释： 这里显示的内容来自于App.vue里面的<template>部分里面的<MyApp/>(本质还是引进的组件)，这部分相当于HTML里面的html部分；接着看<MyApp/>里面究竟是什么：也就是引用的MyApp.vue部分：MyApp.vue里面的template（也就是html部分--同时也是上述页面显示部分）是动态的message（动态数据来源于script里面的message：'组件基础组成'）；同时样式是<style>里面的部分（给class为'container'的元素填了样式）

【注：可以看出vue前端框架与HTML本质就是一个，结构非常相似：html对应template，script对应script，style对应style】

 二、组件的嵌套关系

如上，接下来我们来实现这么一个嵌套关系的前端界面：
 

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

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

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

vue">1.Header.vue

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

vue">2.Main.vue

<template><div class="main"><h3>Main</h3></div>
</template>
<script>
</script>
<style scoped>.main{float:left;width:70%;height: 600px;border: 5px solid #999;box-sizing: border-box;         }
</style>

vue">3.Aside.vue

<template><div class="asside"><h3>Aside</h3></div>
</template>
<script>export default{}
</script>
<style scoped>.asside{float: right;width:30%;height: 600px;border: 5px solid#999;box-sizing: border-box;border-left:0;}
</style>

上述1.2.3.是填在App.vue(root)里面的第一层嵌套，现在可以去App.vue中注册1.2.3.：

<script>
// 第一步，引入组件import Header from './components/Header.vue';import Main from './components/Main.vue';import Aside from './components/Aside.vue';export default{//第二步，注册组件components:{Header ,//对应import部分的名字（符合驼峰命名法则）Main,Aside}}</script>
<template><!-- 第三步显示组件 --><Header/><Main/><Aside/></template>

实现上述操作后我们去实现第一层嵌套的嵌套：

vue">4.Article.vue

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

vue%E5%BD%93%E4%B8%AD%E6%B3%A8%E5%86%8C">在Main.vue当中注册

 代码：

<template><div class="main"><div class="m">Main</div><Article/><Article/></div>
</template>
<script>import Article from './Article.vue';export default{components:{Article}}
</script>
<style scoped>.main{float:left;width:70%;height: 600px;border: 5px solid #999;box-sizing: border-box;         }.m{width:100%;height:20%;text-align: center;line-height: 100px;font-weight: 600;background:rgba(169, 169, 169, 0.226);}</style>

vue">5.Itme.vue

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

vue%E5%BD%93%E4%B8%AD%E6%B3%A8%E5%86%8C">在Aside.vue当中注册

 代码：

<template><div class="asside"><!-- Aside --><ITme/><ITme/><ITme/></div>
</template>
<script>
import ITme from './Itme.vue';export default{components:{ITme}}
</script>
<style>.asside{float:right;width:30%;height:600px;border:5px solid #999;box-sizing: border-box;border-left: 0;}
</style>

得到结果展示：

 三、组件注册方式

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

 局部注册：前边将的方案就是局部注册（在这里不再做过多赘述）

全局注册：

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

vue%E5%BD%93%E4%B8%AD%E5%8F%96%E6%B6%88%E5%B1%80%E9%83%A8%E6%B3%A8%E5%86%8C%E3%80%82">①:那么首先在App.vue当中取消局部注册。

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

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

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

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

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

局部注册需要使用components选项

 四、组件传递数据

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

vue">1.首先我们新建一个Parent.vue

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

vue">2.其次我们再新建Child.vue

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

以上是两个没有什么关系的Parent.vue和Child.vue，我们想让Parent.vue给Child.vue传值，那么在此之前我们先让Parent成为Child的父组件

3.让Parent成为Child的父组件

也可以传递多个值

 

动态传递数据 

 注意事项：

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

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

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

1.Number

vue">①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>

vue">②Child.vue

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

vue">③App.vue

<script>
// 第一步，引入组件import Parent from './components/Parent.vue';export default{//第二步，注册组件components:{Parent}}</script>
<template><Parent/>
</template>

得到结果展示：

2.Array

vue">①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>

vue%E4%B8%8D%E7%94%A8%E4%BD%9C%E5%87%BA%E4%BF%AE%E6%94%B9">③App.vue不用作出修改

得到结果：

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>

vue%E4%B8%8D%E7%94%A8%E5%81%9A%E5%87%BA%E4%BF%AE%E6%94%B9">③App.vue不用做出修改

得到结果：


http://www.ppmy.cn/server/158811.html

相关文章

Jenkins-简介/安装！

Jenkins-简介/安装！

一. 关于持续集成&#xff1a; 持续集成(CI ) [ Continuous Integration ]&#xff0c;通俗来讲&#xff0c;就是一个能监控版本控制系统变化的工具&#xff0c;可以自动编译和测试集成的应用程序。出现问题&#xff0c;能够及时的通知相应人员。持续集成是一种思维工具集&…
阅读更多...
TypeScript 爬虫项目实战：抓取豆瓣电影 Top 250（TypeScript简单应用）

TypeScript 爬虫项目实战：抓取豆瓣电影 Top 250（TypeScript简单应用）

项目介绍 通过 TypeScript 实现一个简单的爬虫程序&#xff0c;从豆瓣电影 Top 250 页面抓取电影的标题和评论信息&#xff0c;并将数据存储到本地 JSON 文件中。该项目使用了 superagent 和 cheerio 两个核心工具&#xff1a; superagent&#xff1a;一个轻量的 HTTP 请求库…
阅读更多...
想法分享，利用html通过求输入框中用户输入数组的最大值

想法分享，利用html通过求输入框中用户输入数组的最大值

我有一个非常有趣的想法 做一个网页求用户输入的数组的最大值 1.直接让用户输入进一个类似数组的容器&#xff0c;输入几个数字之后&#xff0c;点击按钮 2.这个方法不行&#xff0c;因为form表单没有直接类似数组的容器&#xff0c;所以用input输入框代替 3.Input直接输入的是…
阅读更多...
Unity3D实现加载.abc动画模型

Unity3D实现加载.abc动画模型

系列文章目录 unity工具 文章目录 系列文章目录unity工具👉前言👉一、效果展示👉二、使用步骤👉2-1、导入插件👉2-1、导入模型👉三、实现代码控制动画👉四、加载解析👉4-1、数据读取与解析👉4-2、动画播放机制👉4-3、材质👉壁纸分享👉总结👉前言 .…
阅读更多...
《C++11》并发库：简介与应用

《C++11》并发库：简介与应用

在C11之前&#xff0c;C并没有提供原生的并发支持。开发者通常需要依赖于操作系统的API&#xff08;如Windows的CreateThread或POSIX的pthread_create&#xff09;或者第三方库&#xff08;如Boost.Thread&#xff09;来创建和管理线程。这些方式存在以下几个问题&#xff1a; …
阅读更多...
关于反向传播算法个人的一些思考

关于反向传播算法个人的一些思考

关于反向传播算法个人的一些思考 非常简单的一个例子让情况变得复杂一些未完待续 本文为笔者个人对反向传播算法的一个理解&#xff0c;由于笔者也是刚刚踏上深度学习之路&#xff0c;所以很多地方可能理解的不到位&#xff0c;欢迎各位在评论处指出。 本文适合已经了解过反向传…
阅读更多...
数组元素的删除

数组元素的删除

题目描述 把一个数组的第x个位置的元素删除掉 输入 有三行 第一行有一个整数n( n < 10 ) 第二行有n个整数 第三行有一个整数x&#xff0c;为要删除的位置 输出 输出更新后的数组 样例输入 复制 5 1 2 3 4 5 3 样例输出 复制 1 2 4 5 思路&#xff1a;偷个懒&…
阅读更多...
Springboot + vue 小区物业管理系统

Springboot + vue 小区物业管理系统

&#x1f942;(❁◡❁)您的点赞&#x1f44d;➕评论&#x1f4dd;➕收藏⭐是作者创作的最大动力&#x1f91e; &#x1f496;&#x1f4d5;&#x1f389;&#x1f525; 支持我&#xff1a;点赞&#x1f44d;收藏⭐️留言&#x1f4dd;欢迎留言讨论 &#x1f525;&#x1f525;&…
阅读更多...
最新文章

Copyright @ 2022~2023