vue.js抛出与接收自定义事件$emit

抛出自定义事件监听语法：this.$emit('event',val)$emit：实例方法，用来触发事件监听event：自定义事件名称 val：通过自定义事件传递的值（为可选参数）接收自定义事件监听语法：<component @event='fn'></component>fn：function(val){}触发及接收原则：...

虬川候

3970人浏览 · 2018-10-31 15:24:07

虬川候 · 2018-10-31 15:24:07 发布

抛出自定义事件监听

语法：this.$emit('event',val)

$emit：实例方法，用来触发事件监听

event：自定义事件名称

val：通过自定义事件传递的值（为可选参数）

接收自定义事件监听

语法：

<component @event='fn'></component>

fn：function(val){}

触发及接收原则：

谁触发的监听，由谁接收

动作

1. 定义抛出事件

2. 触发抛出事件

3. 绑定抛出事件

4. 接收抛出事件

<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8" />
	<title>Document</title>
	<script src="vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
	<div id="div">
		<parent></parent>
	</div>
	
	<template id="parent">
		<div>
			<p>{{ msg }}{{ info }}</p>			
			<!--绑定抛出事件-->
			<son @change='getv'></son>
		</div>	
	</template>
	
	<template id="son">
		<!--点击触发抛出事件-->
		<p @click='fn'>{{ msg2 }}</p>
	</template>
</body>
</html>
<script type="text/javascript">
	var vm = new Vue({
		el: '#div',
		components:{
			'parent':{
				template:'#parent',
				data:function(){
					return{
						'msg':'haha',
						'info':''
					}
				},
				methods:{
//					接收抛出事件的值赋予info
					getv:function(val){
						this.info = val;
					}
				},
				components:{
					'son':{
						template:'#son',
						data:function(){
							return{
								'msg2':'hehe'
							}
						},
						methods:{
//							定义抛出事件取名change
							fn:function(){
								this.$emit('change', this.msg2);
							}
						}
					}
				}
			}
			
		}
	})
</script>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^