Vue学习（三）组件

最新推荐文章于 2022-03-15 03:47:52 发布

码代马

最新推荐文章于 2022-03-15 03:47:52 发布

阅读量114

点赞数

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

本文链接：https://blog.csdn.net/qq_37296487/article/details/95731411

版权

Vue 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

组件

先看程序

<!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]
触发当前实例上的事件。附加参数都会传给监听器回调。

码代马

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue学习（三）组件

组件先看程序<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <script src="vue.js" type="text/javascript" charset="utf-8"></script&gt...
复制链接

扫一扫