1 子传父 例子

vue 子组件 emit传递事件和事件数据给父组件_tenc1239的博客-CSDN博客

2 子传父 父传爷 层层套娃1中例子

2.1 定义传递事件 传值data

// 孙组件
methods: {sendDataToGrandpa() {const data = 'hello';this.$emit('sendDataToGrandpa', data);}
}

2.2 中间父组件 要 方法绑定事件 也要 定义传递事件 

this.$emit('sendDataToGrandpa', data);

// 父组件
<template><div><Child @sendDataToGrandpa="handleSendDataToGrandpa"></Child></div>
</template><script>
import Child from './Child.vue';export default {components: {Child,},methods: {handleSendDataToGrandpa(data) {console.log('Received data from grandchild:', data);this.$emit('sendDataToGrandpa', data); // 必须在中间组件 定义事件// 在这里处理数据}}
};
</script>

3 方法绑定事件 取值

<template><div><my-component @sendDataToGrandpa="handleSendDataToGrandpa" /></div>
</template><script>
import MyComponent from './MyComponent.vue';export default {data() {return {data: '',};},components: {MyComponent,},methods: {handleSendDataToGrandpa(data) {this.data = data;console.log('爷组件接收到的数据：', this.data);},},
};
</script>