Vue中父组件监听子组件事件时$emit的用法
$emit使用时需要满足以下两个条件:1.父组件可以通过 Prop 向子组件传递数据2.子组件可以使用 $emit方法监听父组件的自定义事件。$emit参数:{string} eventName[...args]eventName:指父组件注册的事件名称;args:父组件注册的事件参数,参数数量不限请看如下代码:1.父组件<template><div><div sty
·
$emit使用时需要满足以下两个条件:
1.父组件可以通过 Prop 向子组件传递数据
2.子组件可以使用 $emit方法监听父组件的自定义事件。
$emit
-
参数:
{string} eventName
[...args]
eventName:指父组件注册的事件名称;
args:父组件注册的事件参数,参数数量不限
请看如下代码:
1.父组件
<template>
<div>
<div style="font-weight:bold">{{fatherText}}:{{toChild}}</div>
<br>
<child-data @showFatherData="updateFatherData" :toChildData="toChild"></child-data>
</div>
</template>
<script>
import ChildData from './childData.vue'
export default {
name:'fatherData',
//子组件
components: {ChildData},
data () {
return {
toChild:"Father Data",
fatherText:'父组件的toChild'
}
},
methods:{
//触发子组件sendToFather事件
updateFatherData(data){
this.fatherText='父组件接收子组件的toChild'
//改变了当前父组件的值
this.toChild = data.childData;
}
}
}
</script>
2.子组件
<template>
<div class="child-data">
<h3 style="font-weight:bold">{{childText}}:{{ curChildData }}</h3>
<button @click="sendToFather(`Child To Father Data`)">点击将‘Child To Father Data’传递给父组件</button>
</div>
</template>
<script>
export default {
name: "childData",
// 用来接收父组件传给子组件的数据
props: ["toChildData"],
data(){
return {
curChildData:this.toChildData,
childText:'父组件传递给子组件的toChild'
}
},
methods: {
sendToFather(val) {
this.childText='子组件传递给父组件的toChild'
this.curChildData=val
var data = {
childData: val
};
//sendToFather事件触发后,使用$emit自动触发showFatherData事件,data为showFatherData的参数,可以有多个
this.$emit("showFatherData", data);
}
}
};
</script>
3.运行项目
点击后页面:
更多推荐
已为社区贡献7条内容
所有评论(0)