Vue——组件篇

最新推荐文章于 2024-07-25 17:35:41 发布
最新推荐文章于 2024-07-25 17:35:41 发布
阅读量146 收藏 1
点赞数
分类专栏： 前端 文章标签： vue js 组件 vue组件 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Paul_1i/article/details/106381526
版权

Vue——组件篇

author：木子六日

学习视频来源于

coderwhy老师的vue教学

文章目录

01.组件的基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件的基本使用</title>
	</head>
	<body>
		<!-- 
			1.创建组件构造器对象；
			2.注册组件；
			3.使用组件；
		 -->
		<div id="app">
			<!-- 3.使用组件 -->
			<cpn></cpn>
		</div>
		<script src="js/vue.js"></script>
		<script type="text/javascript">
			//1.创建组件构造器对象
			const cpn = Vue.extend({
				template:`
				<div>
					<h1>标题</h1>
					<p>哈哈哈哈哈哈</p>
					<p>呵呵呵呵呵呵</p>
				</div>
				`
			})
			//2.注册组件（这种是全局注册）
			//Vue.component('cpn',cpn)
			const app = new Vue({
				el:'#app',
				data:{
					
				},
				//这种是局部注册（只能在Vue实例管理的标签下使用）
				components:{
					cpn: cpn
				}
			})
		</script>
	</body>
</html>

02.父组件与子组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父组件与子组件</title>
	</head>
	<body>
		<div id="app">
			<cpn2></cpn2>
		</div>
		<script src="js/vue.js"></script>
		<script type="text/javascript">
			const cpn1 = Vue.extend({
				template:`
				<div>
					<h1>我是组件1标题</h1>
					<p>哈哈哈哈</p>
				</div>
				`
			});
			const cpn2 = Vue.extend({
				template:`
				<div>
					<cpn1></cpn1>
					<h1>我是组件2标题</h1>
					<p>呵呵呵呵</p>
				</div>
				`,
				//将组件1注册为组件2的子组件
				components:{
					cpn1:cpn1
				}
			});
			const app = new Vue({
				el:'#app',
				components:{
					cpn2:cpn2
				}
			})
		</script>
	</body>
</html>

03.组件注册的语法糖

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>组件注册的语法糖</title>
	</head>
	<body>
		<div id="app">
			<cpn1></cpn1>
			<cpn2></cpn2>
		</div>
		<!-- 模板与js的分离写法 -->
		<script type="text/template" id="cpn1">
			<div>
				<h1>我是组件1标题</h1>
				<p>{{haha}}</p>
			</div>
		</script>
		<!-- 推荐一下这种模板分离写法 -->
		<template id="cpn2">
			<div>
				<h1>我是组件2标题</h1>
				<p>{{hehe}}</p>
			</div>
		</template>
		<script src="js/vue.js"></script>
		<script type="text/javascript">
			Vue.component('cpn2',{
				template:'#cpn2',
				//注意data必须是一个函数
				data(){
					return {
						hehe:'呵呵呵呵'
					}
				}
			})
			const app = new Vue({
				el:'#app',
				components:{
					//局部注册的语法糖
					cpn1:{
						template:'#cpn1',
						//这里也一样，组件注册时data必须写成函数而不是对象
						data(){
							return {
								haha:'哈哈哈哈'
							}
						}
					}
				}
			})
		</script>
	</body>
</html>

04.父子组件间的通信（父传子）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父子组件间的通信</title>
	</head>
	<body>
		<div id="app">
			<!-- 采用v-bind传入父组件数据 -->
			<cpn :cwords="words"></cpn>
		</div>
		
		<template id="cpn">
			<!-- 和data一样直接用{{}}引用 -->
			<div>
				{{cwords}}
			</div>
		</template>
		<script src="js/vue.js"></script>
		<script type="text/javascript">
			
			const app = new Vue({
				el:'#app',
				data:{
					words:['啊啊啊','哈哈哈','呵呵呵']
				},
				components:{
					cpn:{
						template:'#cpn',
						//通过props属性取得从父组件那里获取的数据
						//props:['cwords']
						//props也可以写成对象
						props:{
							//还有可以限制类型
							//cwords:Array,
							//还可以设置初始值
							cwords:{
								type: Array,
								//default: '123456'
								//如果是Object或Array，default必须写成函数
								default(){
									return ['a','b','c']
								}
							}
						}
					}
				}
			})
		</script>
	</body>
</html>

05.父子组件间的通信（子传父）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父子组件通信</title>
	</head>
	<body>
		<!-- 
			子传父步骤：
			1.子组件中添加监听事件（比如点击）
			2.子组件的监听方法中向父组件发送一个监听事件：this.$emit('btnclick',item)
			3.在父组件中的子组件上添加自定义的监听事件<cpn @btnclick="cpnclick"></cpn>
			4.完成父组件的监听方法。
			
			共有两个监听事件，两个监听方法要写。
			以下例子中：
				子组件事件：click
				子组件监听方法：itemclick(item) 定义在子组件中
				父组件事件：btnclick
				父组件监听方法：cpnclick  定义在父组件中参数可以不写
		 -->
		<div id="app">
			<cpn @btnclick="cpnclick"></cpn>
			<h2>{{temp}}</h2>
		</div>
		<template id="cpn">
			<div>
				<!-- 为按钮添加监听事件 -->
				<button v-for="item in categories" @click="itemclick(item)">{{item.name}}</button>
			</div>
		</template>
		<script src="js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{
					temp:''
				},
				methods:{
					//监听到事件后的响应函数
					cpnclick(item){
						this.temp = item.name
					}
				},
				components:{
					cpn:{
						template:'#cpn',
						data(){
							return {
								categories:[
									{id:'1',name:'热门推荐'},
									{id:'2',name:'家用电器'},
									{id:'3',name:'手机数码'},
									{id:'4',name:'电脑办公'}
								]
							}
						},
						methods:{
							itemclick(item){
								//向父组件发射数据,第一个参数是给父组件定义的监听名称，第二个参数是数据
								this.$emit('btnclick',item)
							}
						}
					}
				}
			})
		</script>
	</body>
</html>

06.父组件访问子组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>父组件访问子组件</title>
	</head>
	<body>
		<!-- 
			父组件可以直接通过$children[索引值]找到对应的子组件，然后就可以直接调属性或者方法
			但是$children这种方式用的并不多，用的更多的还是$refs
		 -->
		<div id="app">
			<!-- 给对应子组件加上ref标识 -->
			<cpn ref="aaa"></cpn>
			<button type="button" @click="btnClick">按钮</button>
		</div>
		<template id="cpn">
			<div>
				<h1>我是子组件</h1>
			</div>
		</template>
		<script src="js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				methods:{
					btnClick(){
						console.log(this.$children[0].name);
						console.log(this.$children[0].showName());
						console.log(this.$refs.aaa.name)
						console.log(this.$refs.aaa.showName())
					}
				},
				components:{
					cpn:{
						template:'#cpn',
						data(){
							return {
								name:'我是子组件的name属性'
							}
						},
						methods:{
							showName(){
								return this.name;
							}
						}
					}
				}
			})
		</script>
	</body>
</html>

07.子组件访问父组件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>子组件访问父组件</title>
	</head>
	<body>
		<div id="app">
			<cpn></cpn>
		</div>
		<template id="cpn">
			<button type="button" @click="btnClick">按钮</button>
		</template>
		<script src="js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				data:{
					message:'我是父组件的属性'
				},
				components:{
					cpn:{
						template:'#cpn',
						methods:{
							btnClick(){
								//子组件访问父组件使用$parent即可
								console.log(this.$parent.message);
								//也可以通过$root直接访问根组件
								console.log(this.$root.message);
							}
						}
					}
				}
			})
		</script>
	</body>
</html>

08.slot插槽的基本使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>slot的基本使用</title>
	</head>
	<body>
		<div id="app">
			<cpn></cpn>
			<cpn><span>我是span</span></cpn>
			<cpn><p>我是p</p></cpn>
			<cpn></cpn>
			<hr >
			<cpn2><span slot="mid">我是插槽2</span></cpn2>
			<hr >
			<cpn3>
				<!-- 采用.data的方式拿到子组件数据 -->
				<template v-slot="slot">
					<span v-for="item in slot.data">{{item}}</span>
				</template>
			</cpn3>
		</div>
		<template id="cpn">
			<!-- 
				slot叫做插槽，代表slot里面可以放置不同的东西，使得同一组件可以变得不同
			 -->
			 <div>
			 	<h1>我是子组件</h1>
				<!-- slot内部写的就是默认值，也可以不写 -->
				<slot><button>按钮</button></slot>
			 </div>
		</template>
		<template id="cpn2">
			<!-- 
				如果有多个slot，而我们又想给指定的slot赋值的话，就要给插槽起名字了
			 -->
			 <div>
				<slot><button>我是插槽1</button></slot>
				<slot name="mid"><button>我是插槽2</button></slot>
				<slot><button>我是插槽3</button></slot>
			 </div>
		</template>
		<template id="cpn3">
			<div>
				<!-- 如果父组件想拿到数据，子组件里应该这样写 -->
				<slot :data="languages">
					
				</slot>
			</div>	
		</template>
		<script src="js/vue.js"></script>
		<script type="text/javascript">
			const app = new Vue({
				el:'#app',
				components:{
					cpn:{
						template:'#cpn'
					},
					cpn2:{
						template:'#cpn2'
					},
					cpn3:{
						template:'#cpn3',
						data(){
							return {
								languages:['C','C++','Java','Python','Go']
							}
						}
					}
				}
			})
		</script>
	</body>
</html>
木子六日
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Webpack3的使用
qq_45332753的博客
04-29 375
本笔记根据coderwhy老师，在b站讲的vue视频整理的 这里是他的bilibili视频链接：[学习地址][https://www.bilibili.com/video/BV15741177Eh?p=1] 讲的是真TM好，应该算上b站上讲解vue最好的视频了，注意学习的时候和老师的版本要一致，要不然可能会出现问题，希望大家认真地学习听课，争取早日成为大牛哦 介绍 前端需要模块化。 目前使用前端模块化的一些方案：AMD、CMD、CommonJS、ES6。 在ES6之前，我们要想进行模块化开发，就必须借助于其
Vue 组件 - 杂项
彳亍
12-27 267
编写可复用组件 在编写组件时，最好考虑好以后是否要进行复用。 一次性组件间有紧密的耦合没关系，但是可复用组件应当定义一个清晰的公开接口，同时也不要对其使用的外层数据作出任何假设。 Vue 组件的 API 来自三部分——prop、事件和插槽： Prop： 允许外部环境传递数据给组件； 事件： 允许从组件内触发外部环境的副作用； 插槽： 允许外部环境将额外的内容组合在组件中。 使用 v-b...
超详细Vue-coderwhy个人学习笔记(一)（Day1-Day2）
emgexgb_sef的博客
03-10 1529
必看 笔记目录汇总以及资料源码的获取 学Vue，看这篇就够了-Vue个人学习笔记汇总(含资料代码项目地址) 本篇是Day1到Day2的笔记 （如果觉得不错大家可以给我三连哦~欢迎一起学习交流，我的公众号：richGirlyyy） 目录 一、(了解)课程介绍 课程介绍 ?项目介绍 二、邂逅Vuejs (一) 、内容概述 (二)、(理解)认识Vue.js ?1.为什么要学习Vue.js 2.简单认识一下Vuejs (三)、(掌握)Vue.js安装 (四)、(掌握)Vue初体验 1.Hell
React（coderwhy）- 01(介绍及基础)
weixin_60968779的博客
01-03 1187
学习 coderwhy的React课程，React 笔记
【coderwhy前端笔记 - 阶段六 VUE 】(整理版)（更新中2023.7.16）
hippyoo的博客
07-16 1557
本文以coderwhy前端系统课 - 阶段六VUE为主。一刷版本的笔记有些乱，目前还在二刷整理，同时参考了一部分其他的资料，并加上个人使用总结建议使用资源绑定里的html文件进行阅读资源说明
Vue——抽离组件
张文慧 期待每一天更好的自己
12-05 1210
建一个settingZwh.vue文件（子组件） 编写HTML代码 <template> <div> <img :src="picture" width="2%"/> <span>{{showButton}}</span> <van-switch size="24px" class...
Vue购物车——组件化.rar
05-01
总结，"Vue购物车——组件化"案例展示了Vue如何利用组件化思想构建一个购物车功能，涵盖了组件注册、父子组件间通信和数据单向绑定的关键知识点，这些是理解和掌握Vue.js框架的基础。通过学习和实践这个案例，开发者...
Vue异步组件使用详解
08-30
Vue.js 是一款流行的前端框架，它提供了一种强大的特性——异步组件，使得开发者能够按需加载组件，提高应用的性能。异步组件是Vue.js中优化应用加载速度的重要手段，尤其是在大型项目中，能够显著减少初始加载时间...
Vue侧滑菜单组件——DrawerLayout
10-18
Vue.js的侧滑菜单组件，通常被称为DrawerLayout，是Web应用中常见的设计模式，尤其在移动设备上，用于实现类似Android原生抽屉式的导航功能。本文将深入讲解如何基于Vue.js实现一个简单的DrawerLayout组件，名为vue-...
图片动态绘制组件 vue2.x
07-14
安装 yarn add vue-image-painter # 或 npm i -S vue-image-painter 引入 // main.js 入口中 import ImagePainter from 'vue-image-painter' Vue.use(ImagePainter) 使用，请参考Demo 源码
Angular2开发——组件规划篇
01-21
在ng2中，标签型指令干脆被分离出来，追随vue等新兴势力的风格升级并称为组件，并用来处理所有与视图（DOM）打交道的事情，包括展示数据与动画。而属性型指令则用于完善组件的功能，比如接收用户输入、响应用户点击...
项目搭建规范（CoderWhy）
wanghuan1020的博客
08-25 2193
项目搭建规范（CoderWhy）项目搭建规范一. 代码规范1.1. 集成editorconfig配置1.2. 使用prettier工具1.3. 使用ESLint检测1.4. git Husky和eslint1.5. git commit规范1.5.1. 代码提交风格1.5.2. 代码提交验证二. 第三方库集成2.1. vue.config.js配置2.2. vue-router集成2.3. vuex集成2.4. element-plus集成2.4.1. 全局引入2.4.2. 局部引入2.5. axios集成
coderwhy 商城项目思路梳理（一）
jingkai0714的博客
09-12 944
目录 一. 准备 二.开始写前奏 三.写Home.vue 一. 准备 1.安装脚手架 -g 创建vue项目 vue3:vue create ProjectName vue2:vue init webpack ProjectName 2.建需要的文件夹 common(这里放一些公用的代码 一些js方法文件 mixin，utils，playcount等) components/common&&content network放网络请求数据相关 router 放路由相关 ...
06_Vue3组件化开发(一)之注册组件
酒客的博客
02-05 1432
Vue3组件化开发(一) 人处理问题的方式 人面对复杂问题的处理方式： 任何一个人处理信息的逻辑能力都是有限的 所以，当面对一个非常复杂的问题时，我们不太可能一次性搞定一大堆的内容。 但是，我们人有一种天生的能力，就是将问题进行拆解。 如果将一个复杂的问题，拆分成很多个可以处理的小问题，再将其放在整体当中，你会发现大的问题也会迎刃而解。 认识组件化开发 组件化也是类似的思想： 如果我们将一个页面中所有的处理逻辑全部放在一起，处理起来就会变得非常复杂，而且不利于后续的管理以及扩展； 但如果，我们讲一个
CoderWhy
m0_66445398的博客
03-28 3109
前端性能优化建议 性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼光来阅读本文。 前端性能的一个重要指标是页面加载时间，不仅事关用户体验，也是搜索引擎排名考虑的一个因素。 Donwload: 大神coderwhy WEB前端线上系统课 来自Google的数据表明，一个有10条数据0.4秒能加载完的页面，变成30条数据0.9秒加载完之后，流量和广告收入下降90%。 Goo
b站coderwhy老师_谁将是B站第二位千万粉个人UP？敬汉卿表现拉胯，罗翔老师有戏...
weixin_39866265的博客
12-28 1895
如果朋友们关注过B站UP主粉丝数排行的话，会发现目前B站的千万粉丝UP主一共有两位，一位是B站的官方号：哔哩哔哩漫画，还有一位是个人账号：老番茄。严格来说，老番茄是B站第一位千万粉丝的UP主，单期视频的播放量也配得上这个粉丝数。相比之下哔哩哔哩漫画是靠着关注送东西硬推上去的，而且虽然这个账号也联合别的UP做视频发东西什么的，但实际上粉丝粘性不高，单期视频播放量也一般。那么问题来了，抛开哔哩哔哩漫画...
前端性能优化的 24 条最新建议，实用篇！
全栈修炼
03-11 949
性能优化是把双刃剑，有好的一面也有坏的一面。好的一面就是能提升网站性能，坏的一面就是配置麻烦，或者要遵守的规则太多。并且某些性能优化规则并不适用所有场景，需要谨慎使用，请读者带着批判性的眼...
Nodejs
最新发布
weixin_62789590的博客
07-25 658
官方解释：Node.js发布于2009年5月，由Ryan Dahl开发，是一个基于Chrome V8引擎的JavaScript运行环境，使用了一个事件驱动、非阻塞式I/O模型， [1] 让JavaScript 运行在服务端的开发平台，它让JavaScript成为与PHPPythonPerlRuby等服务端语言平起平坐的[脚本语言]Node.js 的出现吸引了很多前端开发人员开始用 JavaScript 开发服务器代码，其异步编程风格也深受开发人员的喜爱。
Vue笔记（三）——组件&插槽
05-25
在 Vue.js 中，组件可以分为全局组件和局部组件，其中全局组件可在任何地方使用，而局部组件只能在其父组件中使用。 定义组件时，需要使用 Vue.component() 方法，该方法需要传入两个参数：组件名称和组件配置对象...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值