vue 孙组件给爷组件传递数据,本质层层传递

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>