Vue学习(三)组件

组件

先看程序

<!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实例,因此具有自己的datamethods,以及钩子函数等,但没有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
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值