9.Vue.js前端框架：组件

最新推荐文章于 2024-05-12 12:21:21 发布
最新推荐文章于 2024-05-12 12:21:21 发布
阅读量978 收藏 5
点赞数 3
分类专栏： Vue.js前端框架 文章标签： vue javascript html 前端 经验分享
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_44725331/article/details/116188494
版权

1、什么是组件

在使用 Vue 进行前端项目开发过程中，组件的使用最为广泛。然而，什么是组件呢？组件，是 Vue.js 最强大的功能之一。通过开发组件可以封装可复用的代码，将封装好的代码注册成标签，实现扩展 HTML 元素的功能。

2、注册组件

在使用组件之前需要将组件注册到应用中，Vue.js 提供了两种注册方式，局部注册组件和全局注册组件。

2.1 注册全局组件

全局组件可以在所有实例中使用，注册一个全局组件的语法格式：

Vue.component (tagName,option)

语法格式中的两个参数含义分别为：

  • tagName：表示定义的组件名称。对于组件的命名，建议遵循 W3C 规范中的自定义组件命名方式，即字母全部小写并包含一个连字符“-”。
  • option：该参数可以是应用 Vue.extend() 方法创建的一个组件构造器，还可以是组件的选项对象。因为组件是可复用的 Vue 实例，所有它们与一个 Vue 实例一样接收相同选项（el 选项除外），例如，data、computed、watch、methods，以及生命周期钩子等。

全局组件需要在创建的根实例之前注册，这样才能使组件在实例中调用。

在注册组件后，可以在创建的 Vue 实例中以自定义元素的形式进行使用。使用组件的方式如下：

<tagName></tagName>

1、注册一个全局组件的示例代码如下：

<div id="box">
			<my-component></my-component>
		</div>
		   <script type="text/javascript">
		   //创建组件构造器
		   var myComponent = Vue.extend({
			   template:'<h2>注册全局组件</h2>'
		   });
		   //注册全局组件
		   Vue.component('my-component',myComponent)
		   //创建根实例
		   var vm =new Vue({
			   el :'#box'
		   })
		   </script>

运行结果如下图所示：
在这里插入图片描述
2、上述代码使用了组件构造器的方式。在注册全局组件时，还可以在注册的时候直接传入选项对象而不是构造器。示例代码如下所示：

<div id="box">
			<my-component></my-component>
		</div>
		   <script type="text/javascript">
		   //注册全局组件
		   Vue.component('my-component',{
			   template:'<h2>注册全局组件</h2>'
		   })
		   //创建根实例
		   var vm =new Vue({
			   el :'#box'
		   })
		   </script>

运行结果如下图所示：
在这里插入图片描述

注意：为了使代码更简化，建议在注册组件的时候采用直接传入选项对象的方式，形如第二种创建组件的方式。

3、如果组件的模板里面有多个元素，可以将模板的内容包含在一个父元素内，示例代码如下所示：

<div id="box">
			<my-component></my-component>
		</div>
		   <script type="text/javascript">
		   //注册全局组件
		   Vue.component('my-component',{
			   template:'<div>\
			   <h2>注册全局组件</h2>\
			   <span>全局组件在所有实例中都可用</span>\
			   </div>'
		   })
		   //创建根实例
		   var vm =new Vue({
			   el :'#box'
		   })
		   </script>

运行结果如下图所示：
在这里插入图片描述
4、组件选项对象中的 data 和 Vue 实例对象中的 data 的赋值是不同的。一个组件的 data 选项必须是一个函数，而不是一个对象。示例代码如下：

<div id="box">
			<button-count></button-count>
			<button-count></button-count>
			<button-count></button-count>
		</div>
		   <script type="text/javascript">
		   //注册全局组件
		   Vue.component('button-count',{
			   data:function(){
				   return {
					   count :0
				   }
			   },
			   template:'<button v-on:click="count++">单击{{count}}次</button>'
		   })
		   //创建根实例
		   var vm =new Vue({
			   el :'#box'
		   })
		   </script>

运行结果如下图所示：
在这里插入图片描述

2.2 注册局部组件

1、使用 Vue 实例中的 component 选项可以注册一个局部组件。对于 component 对象中的每个属性而言，其属性名就是定义组件的名称，其属性值就是这个组件的选项对象。局部组件只能在当前实例中使用。简单示例如下：

<div id="box">
			<my-component></my-component>
		</div>
		   <script type="text/javascript">
		   var Child ={
			   template :'<h2> 注册局部组件</h2>'
		   }
		   //创建根实例
		   var vm =new Vue({
			   el :'#box',
			   components:{
				   'my-component':Child //注册局部组件
			   }
		   })
		   </script>

运行结果如下图所示：
在这里插入图片描述
2、局部注册的组件只能在其父组件中使用，而无法在其他组件中使用。例如，有两个局部组件 A 和 B，如果希望 A 在 B 中可用，则需要将 A 定义在 B 的 components 选项中。示例代码如下：

<div id="box">
			<parent-component></parent-component>
		</div>
		   <script type="text/javascript">
		   var Child ={
			   template :'<h2> 子组件</h2>'
		   }
		   var Parent ={
			   template :'<div>\
			   <h2>父组件</h2>\
			   <child-component></child-component>\
			   </div>',
			   components:{
				   'child-component' : Child
			   }
		   }
		   //创建根实例
		   var vm =new Vue({
			   el :'#box',
			   components:{
				   'parent-component':Parent //注册局部组件
			   }
		   })
		   </script>

运行结果如下图所示：
在这里插入图片描述

3、数据传递

3.1 Prop 是什么

由于组件实例的作用域是孤立的，所以子组件的模板无法直接引用父组件的数据。Prop 的出现便是实现父子组件之间数据的传递。
Prop 是父组件用来传递数据的一个自定义属性，该属性需要定义在组件选项对象的 props 选项中。通过 props 选项中定义的属性可以将父组件的数据传递给子组件，而子组件需要显式地用 props 选项来声明 Prop。示例代码如下所示：

<div id="box">
			<my-component message="因为热爱,所以奔赴"></my-component>
		</div>
		   <script type="text/javascript">
		   //注册全局组件
		   Vue.component('my-component',{
			   props:['message'],//传递Prop
			   template:'<p>{{message}}</p>'
		   })
		   //创建根实例
		   var vm =new Vue({
			   el :'#box',
		   })
		   </script>

运行结果如下图所示：
在这里插入图片描述

一个组件默认可以拥有任意数量的 Prop，任何值都可以传递给任何 Prop

3.2 传递动态 Prop

1、通过 v-bind 的方式将父组件中的 data 数据传递给子组件。每当父组件的数据发生变化时子组件也会随之发生变化。示例代码如下所示：

<div id="box">
			<my-component v-bind:boxoffice="boxoffice"></my-component>
			<!--可简写 -->
		    <!--<my-component :boxoffice="boxoffice"></my-component> -->
		</div>
		   <script type="text/javascript">
		   //注册全局组件
		   Vue.component('my-component',{
			   props:['boxoffice'],//传递Prop
			   template:'<p>每天计划跑{{boxoffice}}公里,\
			             加油，未来的你一定会感谢现在努力的自己</p>'
		   })
		   //创建根实例
		   var vm =new Vue({
			   el :'#box',
			   data:{
				   boxoffice:4.5
			   }
		   })
		   </script>

当 根实例中的 boxoffice 值发生改变时，组件中的值也会随之改变，运行结果如下图所示：
在这里插入图片描述
2、使用 Prop 传递的数据可以是数值和字符串类型外，还可以是数组或对象类型。传递数组类型数据的示例代码如下所示：

<div id="box">
			<my-item :list="type"></my-item>
		</div>
		   <script type="text/javascript">
		   //注册全局组件
		   Vue.component('my-item',{
			   props:['list'],//传递数组类型Prop
			   template:'<ol>\
			          <li v-for="item in list">{{item}}</li> </ol>'
		   })
		   //创建根实例
		   var vm =new Vue({
			   el :'#box',
			   data:{
				  type :['演员','歌手','导演','作家']
			   }
		   })
		   </script>

运行结果如下图所示：
在这里插入图片描述

注意：如果 Prop 传递的是一个对象或数组，那么它是按引用传递的。在子组件内修改这个对象或数组本身将会影响父组件的状态。

3、在传递对象类型的数据时，如果想要将一个对象的所有属性都作为 Prop 传入，可以使用不带参数的 v-bind。示例代码如下所示：

div id="box">
			<my-item v-bind="type"></my-item>
		</div>
		   <script type="text/javascript">
		   //注册全局组件
		   Vue.component('my-item',{
			   props:['actor','singer','director','writer'],//传递数组类型Prop
			   template:'<div>\
			        <div>演员：{{actor}}</div>\
					<div>歌手：{{singer}}</div>\
					<div>导演：{{director}}</div>\
					<div>作家：{{writer}}</div>\
					</div>'
		   })
		   //创建根实例
		   var vm =new Vue({
			   el :'#box',
			   data:{
				  type:{
					  actor:'晓茗',
					  singer:'房东的猫',
					  director:'尹涛',
					  writer:'大冰'
				  }
			   }
		   })
		   </script>

运行结果如下图所示：
在这里插入图片描述

4、自定义事件

父组件通过使用 Prop 为子组件传递数据，如果子组件要把数据传递回父组件，需要定义自定义事件来实现。

4.1 自定义事件的监听与触发

1、父组件可以像处理原生 DOM 事件一样通过 v-on 监听子组件实例的自定义事件，而子组件可以通过调用内建的 $emit 方法并传入事件名称来触发自定义事件。
$emit() 方法的语法格式如下：

vm.$emit ( eventName,[...args] )

参数说明如下：

  • eventName：传入事件的名称
  • […args]：触发事件传递的参数，该参数是可选的。
    自定义事件的监听和触发的示例代码如下：
<div id="box">
			<div v-bind:style="{fontSize: fontSize+'px'}">
				<my-font v-bind:text="text" v-on:enlarge="fontSize +=2"></my-font>
			</div>
		</div>
		   <script type="text/javascript">
		   //注册全局组件
		   Vue.component('my-font',{
			   props:['text'],
			   template:'<div>\
			        <button v-on:click="action">放大文本</button>\
					<p>{{text}}</p>\
					</div>',
					methods:{
						action:function(){
							this.$emit('enlarge');//触发自定义enlarge事件
						}
					}
		   })
		   //创建根实例
		   var vm =new Vue({
			   el :'#box',
			   data:{
				 text:'世界那么大，我想去看看',
				 fontSize:17
			   }
		   })
		   </script>

运行结果如下图所示：
在这里插入图片描述
2、在父组件监听自定义事件时，如果事件处理程序是一个方法，通过 $emit() 方法传递的参数将会作为第 1 个参数传入该方法中，示例代码如下所示：

<div id="box">
			<my-menu @select-item="onSelectItem" :flag="flag"></my-menu>
		</div>
		   <script type="text/javascript">
		   //注册全局组件
		   Vue.component('my-menu',{
			   props:['flag'],
			   template :'<div class="nav">\
			        <span @click="select(1)" :class="{active: flag===1}">音乐</span>\
					<span @click="select(2)" :class="{active: flag===2}">体育</span>\
					<span @click="select(3)" :class="{active: flag===3}">影视</span>\
					<span @click="select(4)" :class="{active: flag===4}">图片</span>\
					</div>',
					methods:{
						select (value){
							this.$emit('select-item',value) //触发自定义事件并传递参数
						}
					}
		   })
		   //创建根实例
		   var vm =new Vue({
			   el :'#box',
			   data:{
				 flag :1
			   },
			   methods:{
				   onSelectItem:function(value){
					   this.flag=value
				   }
			   }
			   
		   })
		   </script>

运行结果如下图所示：
在这里插入图片描述

4.2 原生事件绑定到组件

在某个组件的根元素上监听一个原生事件，可以使用 v-on 的 .native 修饰符。例如，在组件的根元素上监听 click 事件，当单击组件时弹出“你好，晓茗”的对话框，示例代码如下所示：

<div id="box">
			<my-component v-on:click.native="openDialog"></my-component>
		</div>
		   <script type="text/javascript">
		   //注册全局组件
		   Vue.component('my-component',{
			   template :'<div> \
			        <button>单击按钮弹出对话框</button>\
					</div>'
		   })
		   //创建根实例
		   var vm =new Vue({
			   el :'#box',
			   methods:{
				  openDialog : function(){
					  alert("你好，晓茗");
				   }
			   }
			   
		   })
		   </script>

运行结果如下图所示：
在这里插入图片描述

小白_xm
关注
  • 3
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 7
    评论
专栏目录
vue 组件
酷爱前端的小陈博客
04-22 1408
1. 什么是组件化开发 组件化开发指的是：根据封装的思想，把页面上可重用的UI 结构封装为组件，从而方便项目的开发和维护。 2. vue 中的组件化开发 vue 是一个支持组件化开发的前端框架。 vue 中规定：组件的后缀名是 .vue。之前接触到的 App.vue 文件本质上就是一个 vue 的组件。 3. vue 组件的三个组成部分 每个 .vue 组件都由 3 部分构成，分别是： template -> 组件的模板结构 script -> 组件的JavaScrip.
Vue.js前端 JavaScript 框架
03-15
Vue.js 是一款流行的前端 JavaScript 框架，它是一款轻量级、高性能的...总之，Vue.js 是一款流行的前端 JavaScript 框架，它的特点包括响应式数据绑定、组件化开发、轻量级易上手、高效灵活、支持服务器端渲染等。Vue.
前端-vue组件
jiuyue_77的博客
08-21 435
vue组件
2024年前端最全8个vue前端UI框架框架值得你掌握(1)，字节跳动面试链接
erhtre的博客
05-12 529
计时器浏览器定位和导航浏览历史浏览器和屏幕信息对话框错误处理作为window对象属性的文档元素基于 Vue.js 的 Bootstrap 组件 该仓库包含一系列基于 Bootstrap 标记和 CSS 的本地 Vue.js 组件。
Vue组件 [vue框架][web前端]
m0_57001006的博客
05-29 202
Vue组件 组件作用: 用来减少Vue实例对象中代码量, 日后在使用Vue开发过程中, 可以根据不同的业务功能将页面中划分不同的多个组件, 然后由多个组件去完成整个页面的布局, 便于日后使用vue进行开发时页面管理, 方便开发人员维护 组件使用: (一)全局组件注册: 说明: 全局组件注册给vue实例, 之后可以在任意vue实例的使用范围内使用该组件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"&g
前端基础学习——Vue组件介绍
weixin_53919192的博客
07-11 694
本文为大家就前端基础学习——Vue组件做了介绍，希望对你有帮助~~
前端之Vue组件-55
weixin_34062329的博客
12-27 127
前端之Vue组件-55 Vue组件 一、组件介绍 每一个组件都是一个vue实例 每个组件均具有自身的模板template，根组件的模板就是挂载点 每个组件模板只能拥有一个根标签 子组件的数据具有作用域，以达到组件的复用 二、局部组件 <div id="app"> <l...
同时支持Intact.Vue.React框架的前端组件库
最新发布
06-14
基于内容的推荐（Content-based Recommendation）是 [4]信息过滤技术的延续与发展，它是建立在项目的内容信息上作出推荐的，而不需要依据用户对项目的评价意见，更多地需要用机 器学习的方法从关于内容的特征描述的...
Web前端框架应用：第3章 Vue开发基础-组件进阶.pptx
06-06
第3章 Vue开发基础（下） 全局API 全局配置 ...mixins：mixins是一种分发Vue组件中可复用功能的方式。mixins是一种分发Vue组件中可复用功能的方式。 mixins对象可以包含任何组件选项，将定义的mixins对象
Vue.js 入门：初学者也能掌握的前端框架
04-04
本文将介绍一款名为Vue.js的前端框架。Vue.js是一个轻量级的前端框架，用于构建用户界面和单页面应用程序。它由尤雨溪（Evan You）于2014年创建，并迅速成为全球最受欢迎的JavaScript框架之一。文章将详细介绍Vue.js...
基于_Vue.js_前端框架技术的研究
09-20
软件开发已经从如何开发转变为如何更高效、低成本的开发。...该文基于"Vue.js"前端框架技术研究,阐述了"Vue.js"数据驱动和组件化核心思想,并就基于"Vue.js"的单页"Web"应用和项目开发工程化相关技术进行了分析。
Web前端框架应用：第2章 Vue开发基础-组件.pptx
06-06
Web前端框架应用：第2章 Vue开发基础-组件.pptx
JS框架之vue.js(深入三:组件1）
10-21
Vue.js的组件系统是其核心特性之一，它允许开发者...理解Vue.js的组件系统对于开发高效的前端应用至关重要。通过熟练掌握组件的定义、注册、通信以及与其他Vue特性的结合使用，可以构建出高度可维护和可扩展的应用。
基于Vue.js的SSM项目Furn前端页面源码
03-25
- Vue.js：前端框架，用于构建响应式、组件化的用户界面 - HTML：页面结构定义 - CSS：页面样式设计与布局 文件结构： 总计20个文件，具体包括： - JavaScript文件：6个（.js） - Vue组件文件：5个（.vue） - JSON...
Vue.js分页组件实现：diVuePagination的使用详解
10-18
Vue.js 是一个流行的前端JavaScript框架，它专注于视图层，以简单易用和高度可扩展性著称。Vue.js 允许开发者通过声明式的模板语法来构建用户界面，同时提供了响应式的数据绑定和组件化功能，使得开发过程更加高效。...
知识领域: 前端开发 技术关键词: React、Vue.js、Angular、前端框架
05-09
技术关键词: React、Vue.js、Angular、前端框架 内容关键词: 组件化开发、状态管理、虚拟DOM 用途: 学习构建现代化、可扩展的前端应用程序 资源描述: React 官方文档提供了详细的 React 框架介绍、组件开发指南和...
Vue前端常用组件库
ruarua的博客
12-01 2136
Vue前端常用组件库，包含组件文档地址和安装命令。
Vue基础
qq_42265394的博客
01-15 300
1.1Vue基础 在IDEA中安装Vue的插件 判断和循环(if-else) <!DOCTYPE html> <html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <!--vie
【Vue实践】一文搞懂Vue中的组件
lynnhgwang的博客
03-28 3701
本篇总结Vue中组件的使用，对组件的理解以及使用组件需要特别注意的点。 符号约定： .html文件表示该项目是传统web项目，即没用使用Vue脚手架工具，通过<script>引入vue.js的方法 .vue文件表示该项目是使用vue脚手架工具创建的 文章目录1、非单文件组件和单文件组件2、非单文件组件使用2.1 组件使用三大步骤2.2 组件使用的注意点3、VueComponnet构造函数4、VueComponent 和Vue之间的关系 1、非单文件组件和单文件组件 （1）非单文件组件 非.
vue.js前端框架教材内容
04-28
Vue.js 是一款流行的前端框架，它采用了 MVVM 模式，使得开发者可以更加高效地构建交互式应用程序。下面是一个典型的 Vue.js 教材所涵盖的内容： 1. Vue.js 的基本概念：Vue.js 实例、模板、组件、指令、计算属性等...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

小白_xm

您的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值