Vue学习（三）组件

最新推荐文章于 2024-05-27 14:44:52 发布

码代马

最新推荐文章于 2024-05-27 14:44:52 发布

阅读量157

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签：组件 components

本文链接：https://blog.youkuaiyun.com/qq_37296487/article/details/95731411

Vue 专栏收录该内容

4 篇文章

订阅专栏

本文围绕Vue组件展开，介绍了组件定义，包括全局组件和局部组件。同时重点阐述了组件中父子组件传值的两种方式，即父组件向子组件传值可利用props属性，子组件向父组件传值可通过点击事件调用函数并触发父组件函数绑定的事件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

组件

先看程序

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<com :parent_msg="msg" @func="getSonData"></com>
			<h2>{{sonData}}</h2>
		</div>
		
		<template id="com">
			<div id="">
				<h3>子组件，父组件向子组件传值为：{{parent_msg}}</h3>
				<input type="button" value="子组件向父组件传值" @click="dataForSon" />
			</div>
		</template>
		
		<script type="text/javascript">
			var com = {
				template:'#com',
				props:['parent_msg'],
				data(){
					return {
						son_msg:'子组件的数据'
					}
				},
				methods:{
					dataForSon(){
						this.$emit('func',this.son_msg)	
					}
				}
			}
			
			var vm = new Vue({
				el:'#app',
				data:{
					msg:'父组件的值',
					sonData:''
				},
				components:{
					com
				},
				methods:{
					getSonData(data){
						this.sonData = data;
					}
				}
			})	
		</script>
	</body>
</html>

组件定义

组件是Vue的一种可复用实例，其名字可以自定义，并且因为组件是一种Vue实例，因此具有自己的data，methods，以及钩子函数等，但没有el选项。

组件的定义有全局组件和 局部组件之分，其定义方式及使用方式如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<p>JavaScript声明全局组件时，其要在Vue实例化（new Vue（））之前</p>
			<global></global>
			<local></local>
		</div>
		
		<div id="app2">
			<!-- 全局组件在其它Vue实例中也能使用 -->
			<global></global>
			<!-- 局部组件（私有组件）是在特定实例中定义，因此其它组件并不能使用，-->
			<!-- 若在其它实例中使用，控制台会报错  -->
			<local></local>
		</div>
		
		<script type="text/javascript">
			Vue.component('global',{
				template:"<p v-html='msg'></p>",
				data:function(){
					return {
						msg:'全局组件---组件中的<b>data</b>选项必须是一个函数，<b>并且返回的是一个对象</b>'
					}
				}
			})
			
			new Vue({
				el:'#app',
				components:{
					local:{
						template:"<p>局部组件，其数据定义与全局组件无异</p>"
					}
				}
			})
			
			new Vue({
				el:'#app2'
			})
		</script>
	</body>
</html>

组件中父子组件传值

在组件中传值有两种：父组件向子组件传值，子组件向父组件传值。开头的第一个程序实例就实现了父子组件传值的两种方式。因此以开头代码为例：

vue实例的定义：

var vm = new Vue({
	el:'#app',
	data:{
		msg:'父组件的值',
		sonData:''
	},
	components:{
		com
	},
	methods:{
		getSonData(data){
			this.sonData = data;
		}
	}
})

在上述中定义了vm的Vue实例，其子组件是com，关于com定义如下：

<template id="com">
	<div id="">
		<h3>子组件，父组件向子组件传值为：{{parent_msg}}</h3>
		<input type="button" value="子组件向父组件传值" @click="dataForSon" />
	</div>
</template>

var com = {
	template:'#com',
	props:['parent_msg'],
	data(){
		return {
			son_msg:'子组件的数据'
		}
	},
	methods:{
		dataForSon(){
			this.$emit('func',this.son_msg)	
		}
	}
}

父组件向子组件传值

1. 利用props属性：
在vm实例中定义的msg是不可以直接被子组件使用的，因此需要用到到子组件的props属性，并且在父组件进行如下定义：

<div id="app">
	<com :parent_msg="msg" @func="getSonData"></com>
	<h2>{{sonData}}</h2>
</div>

在上述代码中com使用了子组件。:parent_msg="msg"是v-bind:parent_msg="msg"的缩写。其中parent_msg是要在子组件定义：props:['parent_msg']，然后在子组件中调用插值表达式：{{parent_msg}} 来使用父组件的数据。（可以看作将父组件的msg数据绑定到子组件中的parent_msg引用上）。

子组件向父组件传值

因为有点复杂，以一个新的代码为例：

<div id="app">
	<cm @fuc="getSonData"></cm>
	<p>{{sonData}}</p>
</div>

<template id="cm">
	<div id="">
		<h1>{{msg}}</h1>
		<button type="button" @click="sendData">向父组件发送数据</button>
	</div>
</template>

<script>
	var cm ={
		template:'#cm',
		data:function(){
			return {
				msg:'我是子组件的数据'
			}
		},
		methods:{
			sendData(){
				this.$emit('fuc',this.msg)
			}
		}
	}
	
	new Vue({
		el:'#app',
		components:{
			cm
		},
		data:{
			sonData:''
		},
		methods:{
			getSonData(data){
				this.sonData = data
			}
		}
	})
</script>

如上代码，可以看作子组件通过点击事件调用sendData函数，该函数的函数体是this.$emit('fuc',this.msg)，其中fuc是父组件的函数getSonData(data)绑定的事件，this.msg是父组件函数的参数data。
补充：
vm.$emit( eventName, […args] )
参数：
{string} eventName
[...args]
触发当前实例上的事件。附加参数都会传给监听器回调。