vue 组件基础知识总结


Posted in Vue.js onJanuary 26, 2021

组件基础

1 组件的复用

组件是可复用的Vue实例。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">  
  <style>
   
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<button-counter></button-counter>
			<button-counter></button-counter>
			<button-counter></button-counter>
		</div>
  <script>
			// 定义一个名为 button-counter 的新组件
			Vue.component('button-counter', {
				data: function () {
					return {
						count: 0
					}
				},
				template: '<button v-on:click="count++">点击了 {{ count }} 次.</button>'
			});

			new Vue({ el: '#app' });
  </script>
 </body>
</html>

注意当点击按钮时,每个组件都会各自独立维护它的count。这里自定义组件的data属性必须是一个函数,每个实例维护一份被返回对象的独立的拷贝。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">  
  <style>
   
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<button-counter></button-counter>
			<button-counter></button-counter>
			<button-counter></button-counter>
		</div>
  <script>
			var buttonCounterData = {
				count: 0
			}
			// 定义一个名为 button-counter 的新组件
			Vue.component('button-counter', {
				data: function () {
					return buttonCounterData
				},
				template: '<button v-on:click="count++">点击了 {{ count }} 次.</button>'
			});

			new Vue({ el: '#app' });
  </script>
 </body>
</html>

2 通过 Prop 向子组件传递数据

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">  
  <style>
   
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<blog-post title="My journey with Vue"></blog-post>
			<blog-post title="Blogging with Vue"></blog-post>
			<blog-post title="Why Vue is so fun"></blog-post>
		</div>
  <script>
			Vue.component('blog-post', {
				props: ['title'],
				template: '<h3>{{ title }}</h3>'
			})

			new Vue({ el: '#app' });
  </script>
 </body>
</html>

这里<blog-post>组件就是通过自定义属性title来传递数据。
我们可以使用v-bind来动态传递prop。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">  
  <style>
   
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:title="post.title"></blog-post>
		</div>
  <script>
			Vue.component('blog-post', {
				props: ['title'],
				template: '<h3>{{ title }}</h3>'
			})

			new Vue({
				el: '#app',
				data: {
					posts: [
						{ id: 1, title: 'My journey with Vue' },
						{ id: 2, title: 'Blogging with Vue' },
						{ id: 3, title: 'Why Vue is so fun' }
					]
				}
			});
  </script>
 </body>
</html>

3 单个根元素

每个组件必须只有一个根元素。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">  
  <style>
   
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<blog-post v-for="post in posts" v-bind:key="post.id" v-bind:post="post"></blog-post>
		</div>
  <script>
			Vue.component('blog-post', {
				props: ['post'],
				template: `
					<div class="blog-post">
						<h3>{{ post.title }}</h3>
						<div v-html="post.content"></div>
					</div>
				`
			})

			new Vue({
				el: '#app',
				data: {
					posts: [
						{ id: 1, title: 'My journey with Vue', content: 'my journey...' },
						{ id: 2, title: 'Blogging with Vue', content: 'my blog...' },
						{ id: 3, title: 'Why Vue is so fun', content: 'Vue is so fun...' }
					]
				}
			});
  </script>
 </body>
</html>

注意到v-bind:post="post"绑定的post是一个对象,这样可以避免了需要通过很多prop传递数据的麻烦。

4 监听子组件事件

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">  
  <style>
   
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<div :style="{fontSize: postFontSize + 'em'}">
				<blog-post v-for="post in posts" 
					v-bind:key="post.id" 
					v-bind:post="post"
					v-on:enlarge-text="postFontSize += 0.1" />
			</div>			
		</div>
  <script>
			Vue.component('blog-post', {
				props: ['post'],
				template: `
					<div class="blog-post">
						<h3>{{ post.title }}</h3>
						<button v-on:click="$emit('enlarge-text')">放大字体</button>
						<div v-html="post.content"></div>
					</div>
				`
			})

			new Vue({
				el: '#app',
				data: {
					postFontSize: 1,
					posts: [
						{ id: 1, title: 'My journey with Vue', content: 'my journey...' },
						{ id: 2, title: 'Blogging with Vue', content: 'my blog...' },
						{ id: 3, title: 'Why Vue is so fun', content: 'Vue is so fun...' }
					]
				}
			});
  </script>
 </body>
</html>

子组件通过$emit方法并传入事件名称来触发一个事件。父组件可以接收该事件。

我们可以使用事件抛出一个值。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">  
  <style>
   
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<div :style="{fontSize: postFontSize + 'em'}">
				<blog-post v-for="post in posts" 
					v-bind:key="post.id" 
					v-bind:post="post"
					v-on:enlarge-text="postFontSize += $event" />
			</div>			
		</div>
  <script>
			Vue.component('blog-post', {
				props: ['post'],
				template: `
					<div class="blog-post">
						<h3>{{ post.title }}</h3>
						<button v-on:click="$emit('enlarge-text', 0.2)">放大字体</button>
						<div v-html="post.content"></div>
					</div>
				`
			})

			new Vue({
				el: '#app',
				data: {
					postFontSize: 1,
					posts: [
						{ id: 1, title: 'My journey with Vue', content: 'my journey...' },
						{ id: 2, title: 'Blogging with Vue', content: 'my blog...' },
						{ id: 3, title: 'Why Vue is so fun', content: 'Vue is so fun...' }
					]
				}
			});
  </script>
 </body>
</html>

在父组件中,我们可以通过$event访问到被抛出的这个值。
我们可以在组件上使用v-model。

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">  
  <style>
   
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<!-- <input v-model="searchText"> -->
			<input v-bind:value="searchText" v-on:input="searchText = $event.target.value">
			<p>{{ searchText }}</p>
		</div>
  <script>
			new Vue({
				el: '#app',
				data: {
					searchText: ''
				}
			});
  </script>
 </body>
</html>
<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">  
  <style>
   
  </style>
  <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
 </head>
 <body>
		<div id="app">
			<custom-input v-model="searchText"></custom-input>
			<custom-input v-bind:value="searchText" v-on:input="searchText = $event"></custom-input>
			<p>{{ searchText }}</p>
		</div>
  <script>
			Vue.component('custom-input', {
				props: ['value'],
				template: `<input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" >`
			})

			new Vue({
				el: '#app',
				data: {
					searchText: ''
				}
			});
  </script>
 </body>
</html>

最后,注意解析 DOM 模板时的注意事项。

以上就是vue 组件基础知识总结的详细内容,更多关于vue 组件的资料请关注三水点靠木其它相关文章!

Vue.js 相关文章推荐
详解Vue的mixin策略
Nov 19 Vue.js
Vue实现图书管理小案例
Dec 03 Vue.js
vue 实现基础组件的自动化全局注册
Dec 25 Vue.js
通过vue.extend实现消息提示弹框的方法记录
Jan 07 Vue.js
解决vue使用vant轮播组件swipe + flex时文字抖动问题
Jan 07 Vue.js
antdesign-vue结合sortablejs实现两个table相互拖拽排序功能
Jan 08 Vue.js
vue使用transition组件动画效果的实例代码
Jan 28 Vue.js
vue 实现上传组件
May 31 Vue.js
vue实现列表垂直无缝滚动
Apr 08 Vue.js
vue实现Toast组件轻提示
Apr 10 Vue.js
Vue操作Storage本地化存储
Apr 29 Vue.js
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
深入了解Vue动态组件和异步组件
Jan 26 #Vue.js
如何在 Vue 表单中处理图片
Jan 26 #Vue.js
Vue实现摇一摇功能(兼容ios13.3以上)
Jan 26 #Vue.js
Vue中的nextTick作用和几个简单的使用场景
Jan 25 #Vue.js
Vue使用Ref跨层级获取组件的步骤
Jan 25 #Vue.js
如何在Vue项目中添加接口监听遮罩
Jan 25 #Vue.js
使用vue3重构拼图游戏的实现示例
Jan 25 #Vue.js
You might like
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
基于PHP文件操作的详解
2013/06/05 PHP
PHP imagegrabscreen和imagegrabwindow(截取网站缩略图)的实例代码
2013/11/07 PHP
php下pdo的mysql事务处理用法实例
2014/12/27 PHP
phplot生成图片类用法详解
2015/01/06 PHP
php随机生成数字字母组合的方法
2015/03/18 PHP
php商品对比功能代码分享
2015/09/24 PHP
PhpStorm2020.1 安装 debug - Postman 调用的详细教程
2020/08/17 PHP
MacOS下PHP7.1升级到PHP7.4.15的方法
2021/02/22 PHP
在多个页面使用同一个HTML片段《续》
2011/03/04 Javascript
js日期时间补零的小例子
2013/03/05 Javascript
javascript对象的使用和属性操作示例详解
2014/03/02 Javascript
javascript查询字符串参数的方法
2015/01/28 Javascript
jQuery实现的支持IE的html滑动条
2015/03/16 Javascript
Angularjs制作简单的路由功能demo
2015/04/14 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
BootStrap实现轮播图效果(收藏)
2016/12/30 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
2018/03/15 Javascript
python从ftp下载数据保存实例
2013/11/20 Python
在Python中使用正则表达式的方法
2015/08/13 Python
python批量创建指定名称的文件夹
2019/03/21 Python
python实现猜数字游戏
2020/03/25 Python
python集合常见运算案例解析
2019/10/17 Python
python cv2在验证码识别中应用实例解析
2019/12/25 Python
django有哪些好处和优点
2020/09/01 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
秘鲁购物网站:Linio秘鲁
2017/04/07 全球购物
Halston Heritage官网:简洁的日装,稍显奢华的晚装
2018/11/20 全球购物
《和我们一样享受春天》教学反思
2014/02/07 职场文书
就业协议书
2014/09/12 职场文书
2014年党员自我评议总结
2014/09/23 职场文书
齐云山导游词
2015/02/06 职场文书
2015年信息化建设工作总结
2015/07/23 职场文书
辞职信怎么写?
2019/05/21 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js