大家好,我是@执念!!!
在上一篇博客中,通过props属性来在子父组件之间传送数据,现在我们通过$emit在子父组件传递方法
vue中对$emit的定义见:
vm.$emit( eventName, […args] )
-
参数:
{string} eventName
[...args]
触发当前实例上的事件。附加参数都会传给监听器回调。
用途与示例
1.父组件可以使用 props 把数据传给子组件。
1.子组件可以使用 $emit 触发父组件的自定义事件。
具体案例如下
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>父组件向子组件传送方法($emit)</title>
</head>
<script type="text/javascript" src="js/vue.js" ></script>
<body>
<div id="app">
<!--用v-on绑定自己的事件类型,叫做自定义事件类型 自定义事件类型-->
<calc @func='show'></calc>
</div>
<template id='temp'>
<div>
<p>这是子组件----{{test()}}</p>
</div>
</template>
<script>
//模板对象
var temp={
template:'#temp',
data:function(){
return {
param1:'参数一',
param2:'参数二'
}
},
methods:{
test:function(){
// console.log(this.$emit);
//$emit(要触发的事件类型)
//从第二个参数开始,传入处理当前函数所需要的事件参数
this.$emit('func',this.param1,this.param2);
}
}
}
//把模板注册成组件
Vue.component('calc',temp);
var vr=new Vue({
el:'#app',
data:{
msg:'父组件数据'
},
methods:{
show:function(param1,param2){
console.log("调用父组件方法:接收到参数");
console.log(param1,param2)
}
}
})
</script>
</body>
</html>
代码运行流程截图
谢谢访问!!!