0
点赞
收藏
分享

微信扫一扫

子组件调用父组件的方法并传递数据

$emit 子组件

<template>
<button @click="emitEvent">点击我</button>
</template>
<script>
export default {
data() {
return {
msg: "我是子组件中的数据"
}
},
methods: {
emitEvent(){
this.$emit('my-event', this.msg)
//通过按钮的点击事件触发方法,然后用$emit触发一个my-event的自定义方法,传递this.msg数据。
}
}
}

父组件

<template>
<div id="app">
<child-a @my-event="getMyEvent"></child-a>
<!--父组件中通过监测my-event事件执行一个方法,然后取到子组件中传递过来的值-->
</div>
</template>
<script>
import ChildA from './components/child.vue'
export default {
components: {
ChildA
},
methods: {
getMyEvent(msg){
console.log('接收的数据--------->'+msg)//接收的数据--------->我是子组件中的数据
}
}
}
</script>


举报

相关推荐

0 条评论