父子组件
子传父
子组件
通过在方法中使用this.$emit()传出
<template>
<div>
<h1>children</h1>
<button @click="sendTOParent">向父组件传值</button>
</div>
</template>>
<script>
export default {
data() {
return {
data: "子组件中的信息"
};
},
methods:{
sendTOParent(){
this.$emit('listenToChildEvent',this.data)
}
}
};
</script>>
父组件
通过v-on接受组件参数
<template>
<div>
<children v-on:listenToChildEvent = 'showMsgfromChild' />
</div>
</template>>
<script>
import Children from "./Children";
export default {
data() {
return {
};
},
methods:{
showMsgfromChild(data){
console.log(data)
}
},
components: {
Children
},
};
</script>