Vue - 组件总结

最新推荐文章于 2022-10-13 17:05:48 发布
最新推荐文章于 2022-10-13 17:05:48 发布
阅读量306 收藏 1
点赞数
分类专栏： Vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33961117/article/details/83545147
版权

目录

一、组件概念

二、根组件

三、局部组件：根组件 components内绑定，只能在相应实例结构内使用。

三、全局组件：在任意vue实例下都可调用

四、组件之间的数据传递

1 - 父组件 ->子组件（通过props建立联系绑定属性）

2 - 子组件 -> 父组件（通过事件触发）

Vue - API 查询

一、组件概念

  • 组件与实例一一对应，创建一个实例等同于创建了一个组件；创建一个组件等同于创建一个实例。
  • 根组件（new Vue（））的挂载点是根组件的模板。
  • 组件都具有模板（template），根组件的模板是挂载点（el）
  • 子组件具有自身模板，且根组件是所有子组件的父级（1级…n级）
  • template：模板，替换根组件挂载元素。（内部HTML代码块只能包含一个根节点）

二、根组件

总结：

  • 通过new Vue创建的实例就是根组件(实例与组件一一对应,一个实例就是一个组件)
  • 每个组件组件均拥有模板,template
  • 模板: 由""包裹的html代码块,出现在组件的内部,赋值给组件的$template变量
  • 根组件如果不书写自身模板,那么模板就采用挂载点；如果显式书写模块,就会替换挂载点,但根组件必须拥有挂载点
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>根组件</title>
</head>
<body>
	<p>app之上</p>
	<div id="app">
		<h1>{{ msg }}</h1>
	</div>
	<p>app之下</p>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
	var app = new Vue({
		// 根组件的模板就是挂载点
		el: "#app",
		data : {
			msg: "根组件"
		},
		template: "<div>显式模板</div>"
	})
	// app.$template
</script>
</html>

 

三、局部组件：根组件 components内绑定，只能在相应实例结构内使用。

定义： 满足vue语法规则的对象，并且以局部注册，只能在父组件内使用。目的是达到html+css+js的代码复用

总结：

  1. 局部组件注册 - template："替换的html语法结构模板"
  2. 局部组件注册 - data(){ return { template 内需要的参数：对应值 } }:  或者  data: function(){ return { template 内需要的参数：对应值 } }: 
  3. 局部组件注册 - methods：{ template 内所需方法名 () { 方法内执行代码 } }
  4. 根组件注册 - el：‘css选择器语法’
  5. 根组件注册  - components：{进行全局属性名：组件名}  （components：绑定属性和组件）
    设：全局属性名local-tag，组件名localTag
    1) "localtag": localTag
    2)"localTag": localTag
    3)"local-tag": localTag
    4) localTag: localTag
    5) localTag,   (ES6语法，当二者写法相同时，可以省略，建议)

注意：html不区分大小写，建议使用链接语法；js语言不支持链接语法，建议使用小驼峰写法；
解决方法：使用下划线连接语法

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>局部组件</title>
	<style type="text/css">
		.sup {
			width: 100px;
			height: 100px;
			background-color: orange;
		}
		.sub {
			width: 100px;
			height: 100px;
			background-color: red;
			border-radius: 50%
		}
	</style>
</head>
<body>
	<div id="app">
		<!-- 错误: html不区分大小写 -->
		<!-- <localTag></localTag> -->
		<!-- html中组件命名提倡-的链接语法 -->
		<!-- <local-tag></local-tag> -->
		
		<!-- 1 -->
		<!-- <localtag></localtag>
		<localtag></localtag>
		<localtag></localtag> -->

		<!-- 2 3 4 5 -->
		<local-tag></local-tag>
		<!-- <aaa></aaa> -->

		<btn-tag></btn-tag>
		<btn-tag></btn-tag>
	</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">

	// 语法规则
	// 有自身模板template,有data/methods/computed/watch...
	var localTag = {
		template: "<div class='sup'><div class='sub'></div></div>"
	}
	// var a = {
	// 	template: "<div class='sup'><div class='sub'></div></div>"
	// }

	var btnTag = {
		// template: "<div><button>按钮1</button><button>按钮2</button></div>"
		template: "<button @click='btnAction'>点击了{{ num }}下</button>",
		// data需要绑定方法,数据通过方法返回值进行处理,达到组件复用时,数据的私有化
		data: function() {
			return {
				num: 0
			}
		},
		methods: {
			btnAction: function () {
				this.num++
			}
		}
	}

	// 根组件
	new Vue({
		el: "#app",
		// 注册子组件
		components: {
			// 全局变量名:组件名
			// 1
			// "localtag": localTag
			// 2
			// "localTag": localTag
			// 3
			// "local-tag": localTag
			// 4
			// localTag: localTag
			// 5 ES6对象语法,key value写法相同,可以省略value
			localTag,			
			btnTag,

            // a:aaa, 错
			// aaa:a,

		}
	})
</script>
</html>

三、全局组件：在任意vue实例下都可调用

总结：

  1. 创建全局组件 - Vue.component("组件名", {}
  2. 全局组件实例内部 - template：“html语法结构”
  3. 全局组件实例内部 - data(){return{template所需变量名：值}} 或者 data：function(){return{template所需变量名：值}}
  4. 全局组件实例内部 - methods：{template所需事件方法名(){}}
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>全局组件</title>
</head>
<body>
	<div id="app">
		<!-- 遍历渲染出三个组件，三个组件都被覆盖 -->
		<global-tag v-for="(o, i) in ls" :key="i"></global-tag>
	</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
	// 全局组件
	// 用Vue.component("组件名", {})来创建全局组件
	// 全局组件附属于Vue实例,可以不需要注册就可以使用
	Vue.component("global-tag", {
		template: "<button @click='btnClick'>{{ n }}</button>",
		data () {
			return {
				n: 0
			}
		},
		methods: {
			btnClick () {
				// 修改对应组件data内的n值
				this.n++
			}
		}
	})

	new Vue({
		el: "#app",
		data: {
			// ls内的数字，只是提供显示的初始值
			ls: [0, 0, 0]
		}
	})
</script>
</html>

四、组件之间的数据传递

1 - 父组件 ->子组件（通过props建立联系绑定属性）

总结：

  • html结构内建立关系，使用 <自定义组件名 :全局变量名="变量名" ></自定义组件名>
  • 创建组件，内部使用props接受需要从父组件传入的全局属性名
  • 全局属性的内部值，由父组件的data内进行处理赋值
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>父传子</title>
</head>
<body>
	<div id="app">
		<!-- <local-tag :num="num" :sup_data="sup_data"></local-tag> -->
		<local-tag :num0="num" :sup_data0="sup_data"></local-tag>
	</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
	// 父组件与子组件建立联系的关键点
	// 同绑定属性的方式进行数据传输
	// 1.给在父组件中出现的子组件名定义标签的全局属性
	// 2.全局属性的值赋值为父组件的数据变量
	// 3.在子组件内部,通过props拿到标签中的全局属性名

	var localTag = {
		props: ['num0', 'sup_data0'],
		template: "<div @click='divActive'>{{ num0 }}</div>",
		methods: {
			divActive () {
				console.log(this.num0);
				console.log(this.sup_data0);
			}
		}
	}

	// 数据属于父组件,子组件来接收使用数据
	new Vue({
		el: "#app",
		components: {
			localTag
		},
		data: {
			num: 10,
			sup_data: [1, 2, 3, 4, 5]
		}
	})
</script>
</html>

2 - 子组件 -> 父组件（通过事件触发）

总结：

  1. html内设置自定义事件，<自定义组件名 @自定义事件名="父组件内相应方法名"></自定义组件名>
  2. 组件内，template 设置覆盖事件
  3. 组件内，methods内设置template触发调用方法，方法内部进行html事件绑定传参
    this.$emit("html内自定义事件名", this.组件data内变量)
  4. 数据定义在子组件的data内
  5. 父组件内，methods内对html结构相应的方法进行编码，子组件内data的数据以形参传入
<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<title>子传父</title>
</head>
<body>
	<div id="app">
		<global-tag @send_data="receive_data"></global-tag>
		{{ n }}
	</div>
</body>
<script src="js/vue-2.5.17.js"></script>
<script type="text/javascript">
	// 子传父:
	// 通过发生事件的方式进行数据传输
	// 数据由子组件提供, 父组件通过事件的回调方法获取数据
	// 发生数据的关键: $emit("事件名", ...args)
	Vue.component("global-tag", {
		template: "<div @click='divAction'>我是div</div>",
		data () {
			return {
				num: 10,
				arrList: [1, 2, 3, 4, 5]
			}
		},
		methods: {
			divAction () {
				// 发生事件
				// console.log("要发生事件,携带参数了");
				this.$emit("send_data", this.num, this.arrList)
			}
		}
	});

	new Vue({
		el: "#app",
		data: {
			n: 0
		},
		methods: {
			receive_data (num, arrList) {
				console.log("接收到的数据:", num, arrList);
				this.n = num;
			}
		}
	})
</script>
</html>

 

 

LSYHhhhh
关注
专栏目录
vue基础-组件总结
superjunjin的专栏
05-18 678
一，组件细节 1，代码测试 2，总结 二，父子组件传值 1，代码测试 2，总结 三，组件参数检验与非props特性 1，代码测试 2，总结 四，给组件绑定原生事件 1，代码测试 2，总结 五，非父子组件传值 1，代码测试 2，总结 六，vue的插槽（slot） 1，代码测试 2，总结 七，vue的作用域插槽 1，代码测试 2，总结 八，动态组件与v-once指令 ...
vue 翻页组件vue-flip-page效果
10-15
总结来说，Vue Flip Page是一个强大的翻页组件，提供了丰富的API和事件，使得在Vue.js应用中创建富有动态感的翻页效果变得轻松。通过实例代码和恰当的样式设置，你可以根据项目需求定制出符合设计风格的翻页效果。...
vue 组件总结
taowuhua的博客
03-30 565
组件基础 一、组件作用 组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用的界面都可以抽象为一个组件树： 上图由页头、侧边栏组成，我们可以把他们理解为组件，每个组件又包含了其它的像导航...
Vue组件进阶知识总结
weixin_33869377的博客
03-27 159
　　上一篇我们重点介绍了组件的创建、注册和使用，熟练这几个步骤将有助于深入组件的开发。另外，在子组件中定义props，可以让父组件的数据传递下来，这就好比子组件告诉父组件：“嘿，老哥，我开通了一个驿站，你把东西放到驿站我就可以拿到了。” 　　今天我们将着重介绍slot和父子组件之间的访问和通信。slot是一个非常有用的东西，它相当于一个内容插槽，它是我们重用组件的基础。Vue的事件系统独立于原生的...
Vue组件 知识点总结
最新发布
z750467878的博客
10-13 502
vue组件 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码如下（示例）： import numpy as np import
VUE中的slot（插槽：默认插槽/具名插槽/作用域插槽）
weixin_43743804的博客
09-16 684
个人理解就是，插槽用于决定将携带的内容插入到指定位置，插槽的显示不显示，怎样显示由父组件控制，而插槽在哪显示就由子组件来进行控制。 使用 默认插槽 父组件 <file-list v-if="showFileDialog" :fileList='filesArr' @closeFileDialog='closeFileDialog'> <span>showText</span> </file-list> 在父组件引用的子组件中写入想要显示的内容（可以使用标
vue-sku-form:基于 Vue & ElementUI 的电商 SKU 表单配置组件
05-29
总结来说，Vue-Sku-Form 是一个强大的电商 SKU 表单解决方案，结合 Vue.js 和 ElementUI 的优势，为开发者提供了一种高效、灵活的方式来处理商品的变体选择问题，大大提高了开发效率和用户体验。
vue 二维码组件 vue-qr.doc
10-23
Vue-QR 组件详解 Vue-QR 是一个基于 Vue.js 的二维码组件，提供了一个简单易用的方式来生成二维码。下面将对 Vue-QR 组件进行详细的介绍。 安装和使用 要使用 Vue-QR 组件，首先需要使用 npm 安装该组件。可以...
vue-numeric-输入字段组件，用于显示基于Vue的货币值。-Vue.js开发
05-27
5. 双向数据绑定：作为Vue组件，它与Vue实例的数据模型双向绑定，当用户输入变化时，组件的状态会立即反映到数据模型中，反之亦然。 为了使用这个组件，开发者通常需要按照以下步骤操作： 1. 安装：可以通过npm或...
vue-drag-chart 拖动/缩放的图表组件的实例代码
10-15
总结来说，Vue-Drag-Chart 是一个强大且灵活的图表组件，能够轻松创建具有拖动和缩放功能的图表，适用于各种数据可视化场景。通过实例代码和详细的配置选项，你可以根据需求定制出符合项目需求的交互式图表。
vue组件的总结
weixin_33736048的博客
03-03 99
1.根组件和子组件结构基本一样 ​ 2 . 父组件向子组件传递参数 ​ 3.子组件通过 props接收数据 ​ 4.子组件Props是你可以在组件上注册的一些自定义特性。当一个值传递给一个 prop 特性的时候，它就变成了那个组件实例的一个属性,属性或方法要在实例上（在props）定义， 通过初始化属性，确保此属性在数据选项或基于类的组件中是被动的 5、组件绑定注册属性使用横杠...
Vue组件总结
实践求真知
11-26 312
一 什么是组件 组件（Component）是 Vue.js 最强大的功能之一。 组件可以扩展 HTML 元素，封装可重用的代码。 组件系统让我们可以用独立可复用的小组件来构建大型应用，几乎任意类型的应用界面都可以抽象为一个组件树。 二 前端项目组件分析 1 三要素 入口js：src/main.js 入口页面：src/App.vue 路由：src/router/index.js main.js 中引入了App.vue和 router/index.js，根据路由配置，App.vue中会显示相应
vue组件简单总结
weixin_44303986的博客
11-17 275
全局组件简单示例 // 定义一个名为 mybutton 的新组件 Vue.component('mybutton',{ template:'<button>mybtn<button>' }) 局部组件示例 // 定义一个名为 mybutton 的新组件 new Vue({ el:"#app", components:{ 'mybutton':{ template:'<button>mybtn<button>' } } }) 组件： 因
【vue】关于组件总结
z767327552的专栏
03-19 405
1.函数式组件Vue.component('my-component', { functional: true, // 为了弥补缺少的实例 // 提供第二个参数作为上下文 render: function (createElement, context) { // ... }, // Props 可选 props: { // ... } })如果你使...
Vue组件使用总结
zengxingyuluo的博客
04-25 165
一、注册组件 <div id="app"> <mycom></mycom> </div> <script> Vue.component('mycom',{ template:'<div>这里是组件内容</div>' }); var vm=new Vue({ ...
Vue 组件学习总结
violetjack的专栏
12-27 789
本文主要是对 Vue 组件学习的总结和之后要写的内容的计划。 组件学习总结 组件库的本质是什么？ 组件库其实就是一堆组件组成的一个项目，一般项目里会有组件和演示项目。当项目调试时 webpack 打包演示项目的入口文件来进行演示和调试，在发布组件库时 webpack 打包组件库的入口文件。将打包完的组件发布到 npm。 对于创建组件库的想法 我觉得，组件库的左右只能是一个 —— 提高生产效率。...
vue组件通讯总结
heroicpoem的专栏
03-08 515
<h1 class="title">vue之父子组件间通信实例讲解(props、$ref、$emit)</h1> <div class="info"> &nbsp;更新时间：2018年05月22日 10:16:18 &nbsp; 作者：四小七 &nbsp; </div> <div class="lbd clear...
vue--组件相关知识总结
m0_37588245的博客
07-04 203
任意的应用界面都可以抽象成一个组件树。在vue项目中，组件可以直白的翻译成：封装一些自己的代码，使之可以在项目中重复使用。1》所有实例都能用全局组件。2》局部组件只能在指定实例中使用。本实例是在但界面中配置组件，一般项目开发是在目录中生成组件，然后按照名字路径引用（规则一般为首字母大写命名） 组件传值 1.父子传值 2.子父传值子父传值又可以细分为两种情况a:子组件主动触发事件将数据传递给父组件(子组件主动传值)b:子组件中绑定ref，且定义一个父组件可直接调用的函数，父组件注册子组件后绑定ref
关于Vue组件知识的总结与梳理！！ 适合对vue组件概念比较模糊或还不太了解的同学！！
weixin_53893220的博客
07-26 173
这是一篇关于vue组件内容的大概介绍和总结，希望对大家有用！ 组件 Vue 1.x中 全局组件： 创建组件构造器 调用Vue.extend 注册组件 调用Vue.component 使用组件 局部组件： 创建组件构造器 在vue实例内部定义属性components，然后 cpn使用的组件名：组件构造器 使用组件 Vue 2.x 直接在vue实例的components里 组件不能访问vue实例的数据 因此组件有自己的data数据集，而且必须用函数返回的形式定义 组件构造： ‘注册名称’：注册模板 而
Vue中详解vue-amap组件的集成与搜索盒使用
总结来说，本文档主要涉及Vue开发中的地图集成，包括vue-amap组件的安装、配置以及如何在Vue组件间通过事件总线进行通信，确保地图功能的正常工作和数据驱动的用户界面交互。这对于理解和使用Vue框架与高德地图的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值