Vue基础：组件

最新推荐文章于 2022-09-19 08:39:14 发布
最新推荐文章于 2022-09-19 08:39:14 发布
阅读量196 收藏
点赞数
分类专栏： Vue 文章标签： js vue javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43805971/article/details/107529539
版权

组件的构成

组件模块化是Vue的渐进式框架的特点，了解组件的构成是迈开模块化开发的第一步，组件分为全局组件和局部组件。

  • 全局组件：
<body>
	<div id="app">
		<cpn></cpn>
	</div>
</body>
`//全局组件
	const cpn1 =  Vue.extend({
		template:`<div>
					<h1>我是全局标题1</h1>
					<p>我是全局内容1</p>
				  </div>`,
	})`
	// 注册全局组件，可以全局使用
	Vue.component("cpn",cpn1)
  • 局部组件
<body>
	<div id="app">
		<cpn1></cpn1>
	</div>
</body>
const app = new Vue({
		el:"#app",
		// 局部组件
		components:{
			cpn1:{
				template:`<div>
					<h1>我是局部组件标题1</h1>
					<p>我是局部内容1</p>
				</div>`
			}
		},
	})

父子组件的区分

存在组件就会有组件的嵌套，就会上下级的关系，就是父组件，和子组件

//第一个组件构造器
const cpn1 =  Vue.extend({
	template:`<div>
				<h1>我是第一个标题</h1>
				<p>我是第一个内容</p>
			  </div>`,
})
//第二个组件构造器
const cpn2 =  Vue.extend({
	template:`<div>
				<h1>我是第二个标题</h1>
				<cpn1></cpn1>
				<p>我是第二个内容</p>
			  </div>`,
	components:{
		cpn1:cpn1
	}
})

父子组件的通信

  • 父传子（驼峰命名的问题，props属性直接传递）
  • 子传父（对象方式）
<!-- 
	父传子，通过props传递
	子传父，自定义事件
 -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>

	<!-- 父组件模板 -->
	<div id="app">
		<h1>父组件</h1>
		<Child :cmovies="movies" :cmessage="message" :cactors="actors"></Child>
		<Child2></Child2>
		<!-- 子传父  -->
		<Cpn @item-click="cpnClick"></Cpn>
	</div>
</body>

<!-- 子组件模板 -->
<template id="child">
	<div>
		<h2>父组件传值的子组件</h2>
		<p>父传子后cmessage:{{cmessage}}</p>
		<ul>
			<li v-for="item in cmovies">{{item}}</li>
		</ul>
		父传子后cactors:演员名
		<ul>
			<li v-for="items in cactors">{{items}}</li>
		</ul>
	</div>	
</template>

<!-- 子传父模板 -->
<template id="cpn">
	<div>
		<button v-for="item in Lists" 
		@click="cpnClick(item)"
		>{{item.name}}</button>
	</div>
</template>

<script>
const Cpn = {
	template:"#cpn",
	data(){
		return{
			Lists:[
				{id:0,name:'热门推荐'},
				{id:1,name:'手机数码'},
				{id:2,name:'电脑科技'},
				{id:3,name:'家电设备'},
			]
		}
	},
	methods:{
		cpnClick(item){
			// 子传父的方法，使用$emit('定义方法名')
			this.$emit("item-click",item)
		}
	}
}

//构建子组件
const Child = {
	template:'#child',
	// props:["cmovies","cmessage"],
	props:{
		cmovies:{
			type:Array,
			// 如果类型是数组或者对象，default必须是个函数，返回一个默认值
			default(){
				return["未上映电影!"]
			},
			// true：使用时值必须传值，不传就报错；fales：使用时可传可不传
			required:false
		},
		cmessage:{
			type:String,
			// 默认值(string)
			default:"你好！",
			// true：使用时值必须传值，不传就报错；fales：使用时可传可不传
			required:false
		},
		cactors:{
			type:Object,
			default(){
				return{

				}
			}
		}
	},
	// 这里的data必须是函数，且有返回值
	data(){
		return{

		}
	}
}

// 父组件
const app = new Vue({
	el:"#app",
	data:{
		message:'蜘蛛侠电影集',
		movies:["蜘蛛侠",'蜘蛛侠2','蜘蛛侠3','超凡蜘蛛侠','超凡蜘蛛侠2','蜘蛛侠:英雄归来-返校季','蜘蛛侠:英雄远征'],
		actors:{
			name:'托比马奎尔',
			name1:'荷兰弟'
		}
	},
	methods:{
		// 子传父方法
		cpnClick(item){
		// 父组件接收到子组件传值
			console.log( item.id,item.name )
		}
	},
	components:{
		Child,
		Cpn,
		Child2:{
			template:`<div>
						<h2>父组件不传值显示默认值的子组件2</h2>
						<p>父未传子显示默认值的bmessage:{{bmessage}}</p>
						<p>父未传子显示默认值的bmessage</p>
						<ul>
							<li v-for="item in bmovies">{{item}}</li>
						</ul>

						<ul>
							<li v-for="items in bactors">{{items}}</li>
						</ul>
					</div>	`,
			props:{
				bmovies:{
					type:Array,
					// 如果类型是数组或者对象，default必须是个函数,返回一个默认值
					default(){
						return["未上映电影!"]
					},
					// true：使用时值必须传值，不传就报错；fales：使用时可传可不传
					required:false
				},
				bmessage:{
					type:String,
					// 默认值(string)
					default:"你好！",
					// true：使用时值必须传值，不传就报错；fales：使用时可传可不传
					required:false
				},
				bactors:{
					type:Object,
					default(){
						return{
							name:'尚未演员0',
							name1:'尚未演员1'
						}
					}
				}
			}
		}
	}

})

</script>
</html>
  • 父子传递双向绑定案例
    基础普通写法
<!-- 
	需求：
	1.使用input的双向绑定实现修改子组件的值更改父组件的值
	2.在修改num时,num1的值为num值的100倍
	3.在修改num1时,num的值为num1的0.01倍
 -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<!-- 父组件模板 -->
	<div id="app">
		<h1>number:{{number}}</h1>
		<h1>number1:{{number1}}</h1>
		<cpn :cnumber="number" :cnumber1="number1" 
			@changenum="childNum" 
			@changenum1="childNum1"
		/>
	</div>
</body>

<!-- 子组件模板 -->
<template id="child">
	<div>

		<h1>Props-Number:{{cnumber}}</h1>
		<h1>data-Number:{{bnumber}}</h1>
		<!-- 使用v-model实现了在子组件中的双向绑定，但不能改变父组件的值,需要通过watch方法才可以实现 -->	
 		<input type="text" :value="bnumber" @Input="changeNum($event)"> 
 		
		<h1>Props-Number1:{{cnumber1}}</h1>
		<h1>data-Number1:{{bnumber1}}</h1>
		
		<input type="text" :value="bnumber1" @Input="changeNum1($event)">

	</div>	
</template>
<script>
	const app = new Vue({
		el:"#app",
		data:{
			number:1,
			number1:2
		},
		methods:{
			childNum(e){
				// console.log(e)一般过传过来的参数都是strin类型，所以需要转换一下
				this.number = parseFloat(e)
			},
			childNum1(e){
				// console.log(e)一般过传过来的参数都是strin类型，所以需要转换一下
				this.number1 = parseFloat(e)
			},
		},
		components:{
			// 在修改父组件传给子组件的值时，不要直接修改，要通过data或者computeds修改
			cpn:{
				template:"#child",
				props:{
					cnumber:{
						type:Number,
						default:'none',
					},
					cnumber1:{
						type:Number,
						default:'none',
					}

				},
				data(){
					return{
						bnumber:this.cnumber,
						bnumber1:this.cnumber1
					}
				},
				methods:{
					changeNum(event){
						// console.log( event.target.value )获取到input框的值
						this.bnumber = event.target.value;
						// 将子组件修改的值传给父组件中
						this.$emit( "changenum",this.bnumber )
						// 修改关联值,并再次传给父组件(我这里一开始写错了，又写一个方法，其实传第二个值直接用第二个方法就行了)
						this.bnumber1 = this.bnumber*100
						this.$emit( "changenum1",this.bnumber1 )
					},
					changeNum1(event){
						// console.log( event.target.value )获取到input框的值
						this.bnumber1 = event.target.value;
						// 将子组件修改的值传给父组件中(我这里一开始写错了，又写一个方法，其实传第一个值直接用第一个方法就行了)
						this.$emit( "changenum1",this.bnumber1 )
						// 修改关联值,并再次传给父组件
						this.bnumber = this.bnumber1/100
						this.$emit( "changenum",this.bnumber )
					}
				},
				// 组件的一个属性，可以省略通过改变子组件的data来传递给父组件
			}
		}
	})
</script>
</html>

使用watch属性写法：

<!-- 
	需求：
	1.使用input的双向绑定实现修改子组件的值更改父组件的值
	2.在修改num时,num1的值为num值的100倍
	3.在修改num1时,num的值为num1的0.01倍
 -->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<!-- 父组件模板 -->
	<div id="app">
		<h1>number:{{number}}</h1>
		<h1>number1:{{number1}}</h1>
		<cpn :cnumber="number" :cnumber1="number1" 
			@changenum="childNum" 
			@changenum1="childNum1"
		/>
	</div>
</body>

<!-- 子组件模板 -->
<template id="child">
	<div>

		<h1>Props-Number:{{cnumber}}</h1>
		<h1>data-Number:{{bnumber}}</h1>
		<!-- 使用v-model实现了在子组件中的双向绑定，但不能改变父组件的值,需要通过watch方法才可以实现 -->
		<input type="text" v-model="bnumber">
		<h1>Props-Number1:{{cnumber1}}</h1>
		<h1>data-Number1:{{bnumber1}}</h1>
		<input type="text" v-model="bnumber1">
	</div>	
</template>
<script>
	const app = new Vue({
		el:"#app",
		data:{
			number:1,
			number1:2
		},
		methods:{
			childNum(e){
				// console.log(e)一般过传过来的参数都是strin类型，所以需要转换一下
				this.number = parseFloat(e)
			},
			childNum1(e){
				// console.log(e)一般过传过来的参数都是strin类型，所以需要转换一下
				this.number1 = parseFloat(e)
			},
		},
		components:{
			// 在修改父组件传给子组件的值时，不要直接修改，要通过data或者computeds修改
			cpn:{
				template:"#child",
				props:{
					cnumber:{
						type:Number,
						default:'none',
					},
					cnumber1:{
						type:Number,
						default:'none',
					}

				},
				data(){
					return{
						bnumber:this.cnumber,
						bnumber1:this.cnumber1
					}
				},
				methods:{
					changeNum(event){
						// console.log( event.target.value )获取到input框的值
						this.bnumber = event.target.value;
						// 将子组件修改的值传给父组件中
						this.$emit( "changenum",this.bnumber )
						// 修改关联值,并再次传给父组件(我这里一开始写错了，又写一个方法，其实传第二个值直接用第二个方法就行了)
						this.bnumber1 = this.bnumber*100
						this.$emit( "changenum1",this.bnumber1 )
					},
					changeNum1(event){
						// console.log( event.target.value )获取到input框的值
						this.bnumber1 = event.target.value;
						// 将子组件修改的值传给父组件中(我这里一开始写错了，又写一个方法，其实传第一个值直接用第一个方法就行了)
						this.$emit( "changenum1",this.bnumber1 )
						// 修改关联值,并再次传给父组件
						this.bnumber = this.bnumber1/100
						this.$emit( "changenum",this.bnumber )
					}
				},
				// 组件的一个属性，可以省略通过改变子组件的data来传递给父组件
				watch:{
					bnumber(newVaule){
						// console.log( "newVaule:"+newVaule )
						this.bnumber1 = newVaule*100
						this.$emit( "changenum1",this.bnumber1 )
					},
					bnumber1(newVaule){
						// console.log( "newVaule:"+newVaule )
						this.bnumber = this.bnumber1/100
						this.$emit( "changenum",this.bnumber )
					}
				}
			}
		}
	})
</script>
</html>
  • 父组件拿到子组件的方法（$ children 或者$ refs ），或者子组件拿父组件的方法（$ parent或者$ root），需要注意的细节都写到代码注释里。
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
	<div id="app">
		<cpn></cpn>
		<cpn></cpn>
		<cpn ref="getChild"></cpn>
		<button @click="btnClick">按钮</button>
		<h2>展示子组件的data值：{{childrenVaule}}</h2>
	</div>

	<template id="cpn">
		<h1>我是子组件</h1>
	</template>
</body>
<script>
	var app = new Vue({
		el:'#app',
		data:{
			childrenVaule:""
		},
		methods:{
			btnClick(){
				// 调取子组件方法  $children $refs,由于this.$children是一个数组，所以如果组件
				// 数量多，则不好选择，所以一般使用$refs方法，只用当需要拿到所有子组件的值的时候，才会
				// 使用$children的方法
				// console.log( this.$children )
				
				// 在父组件上调取了子组件的children方法
				// this.$children[0].showMessage()
				
				//在父组件上调取了子组件的refs方法(推荐使用)也可以拿到子组件的data值：
				console.log( this.$refs )
				this.$refs.getChild.showMessage()
				this.childrenVaule = this.$refs.getChild.name
			}
		},
		components:{
			cpn:{
				template:"#cpn",
				data(){
					return{
						name:"子组件的name"
					}
				},
				methods:{
					showMessage(){
						console.log( "showMessage" )
					}
				}
			}
			
		}
	})

	
</script>

</html>
Darryl、
关注
专栏目录
Vue组件基础
qq_42839746的博客
05-09 529
1、组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。 2、在大型的应用中为了分工、代码复用、提高维护性不可避免地需要将应用抽象为多个相对独立的模块。
Vue组件：使用Prop实现父组件向子组件传递数据
最新发布
pan_junbiao的博客
09-03 1135
由于组件实例的作用域是孤立的，因此子组件的模板无法直接应用父组件的数据。如果想要通过父组件向子组件传递数据，就需要定义 Prop。Prop 是父组件用来传递数据的一个自定义属性，这样的属性需要定义在组件选项对象的 props 选项中。通过props 选项中定义的属性可以将父组件的数据传递给子组件，而子组件需要显示地用props 选项来声明 Prop。
[今日白学]组件的基础的基础的基础
weixin_34235457的博客
04-01 91
#咕咕咕咕咕咕咕咕#本文章仅用作于个人学习笔记（蓝后我就可以乱写啦）复制代码接上一文章利用Vue-CLi实现一个简单的TodoList工具一、组件化的优点当TodoList的todo item越来越多的时候，我们应该把它拆分成一个组件进行开发，维护。组件的出现，就是为了拆分Vue实例的代码量，让我们以不同的组件，来划分成不同功能模块,然后拼接成一个完整的页面。将来需要怎样的功能，就去调对应的组件...
Vue的基础组件
qq_15034541的博客
03-18 608
1.4 Vue基础组件 1.4.1组件注册 语法： Vue.component("自定义组件的名称", { 这个括号内可以写实例里面的内容，例如data（值必须是一个函数）、methods、computed、watch等但是不可以写el。 1、props可以定义一些数据、接收一些数据他的值可以是字符串、数字、对象、数组等，也可以是数据类型。 2、template：的值是我们自定义组件所需要的代替的html代码。 }） 1.4.2对于props的命名问题： 在props命名的时候可以使用驼峰的方式进行
Vue基础（组件）
Vivianluolita的专栏
12-27 590
什么是组件？ 组件 (Component) 是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码。在较高层面上，组件是自定义元素，Vue.js 的编译器为它添加特殊功能。在有些情况下，组件也可以表现为用 is 特性进行了扩展的原生 HTML 元素。所有的 Vue 组件同时也都是 Vue 的实例，所以可接受相同的选项对象 (除了一些根级特有的选项) 并提供相同的生命周期
vue基础之组件
weixin_45762767的博客
07-18 198
vue基础
vue-template:组件相关的练习
03-31
首先，Vue组件是Vue应用的基础单元，它们可以像HTML元素一样嵌套、组合和复用。创建组件通常涉及以下几个步骤： 1. **定义组件**: 使用 `Vue.component()` 方法注册一个全局组件，例如： ```javascript Vue....
Vue移动端基础组件对话框
08-12
在Vue移动端应用开发中，对话框（Dialog）是不可或缺的基础组件之一，用于提供临时的、交互式的用户界面，常用于确认操作、展示信息或者获取用户输入。本篇将深入探讨如何在Vue.js环境下构建和使用对话框组件。 一...
vue组件：使用CodeSandbox创建
02-15
在`src/App.vue`中引入并使用`HelloWorld`组件： ```html import HelloWorld from './components/HelloWorld.vue'; export default { components: { HelloWorld } }; ``` 5. **实时预览**...
2024年Vue基础知识总结 4：vue组件化开发，ui前端开发学习课程-vue 全局组件
07-06
前端组件学习 2024年Vue基础知识总结 4：vue组件化开发，ui前端开发学习课程_vue 全局组件
vue基础的组件
weixin_60524655的博客
05-29 444
目录 一.过滤器 1.定义过滤器 2.私有过滤器和全局过滤器 3.连续调用多个过滤器 4.过滤器传参 5.过滤器的注意点 二.watch侦听器 1.什么是侦听器 2. immediate 选项 3.侦听器的格式 三.计算属性 1.什么是计算属性 2.计算属性的特点好处 一.过滤器 过滤器（Filters）是 vue 为开发提供的功能，一般用在文本的格式化。过滤器可以用在两个地方：插值表达式和 v-bind 属性绑定。 过滤器应该被添加在JavaS...
vue3---组件基础(上)保姆级篇
热门推荐
厚积薄发.
08-15 1万+
关于 vue3 基础学习，前面两篇博客讲了单页面应用程序、vite 的基本使用。这期就来一篇多一点的吧！这期主要内容有：组件化开发思想、vue 组件的构成、组件的基本使用、封装组件的案例。看完这些，砸门也就详细了解什么是组件了。废话不多说，直接上刺刀！！组件化开发指的是：根据封装的思想，把页面上可重用的部分封装为组件，从而方便项目的开发和维护。ibootstrap - Bootstrap可视化布局系统所展示的效果，就契合了组件化开发的思想。.........
VUE之组件基础篇
MClink的博客
01-03 596
组件注册及其通信传值(重点内容)   1.什么是组件？ 任何一个页面我们都可以看做成无数个组件的构成，但是组件只能有一个根元素，也就是说我们需要将一个大的div把它整个包起来，组件化的方式可以让很多代码进行复用，例如类似的表单注册一个组件后，只需要将组件名作为一个标签使用即可达到想用的效果。   2.组件中的data必须是函数 可以看出，注册组件时传入的配置和创建Vue实例差不多，但也...
vue.js 组件基础
Claroja
02-18 248
注意组件和vue实例结构相同,不过组件没有el属性,而且data对应的是函数,而不是变量. // 定义一个名为 button-counter 的新组件 Vue.component('button-counter', { data: function () { return { count: 0 } }, template: '&amp;lt;button v-on:...
vue-组件基础
m0_53614495的博客
09-19 541
vue组件中相关的基础概念
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值