vue3.0孙子给爷组件传值

Vue3.0中，组件间的传值可以通过props属性来进行。如果孙子组件想要给爷爷组件传递值，孙子组件需要将数据作为props传递给父组件（一般是孙子组件的直接上级），然后再由父组件通过props传递给更高级别的组件，直到达到爷爷组件。

例如，在孙子组件里：

<template>
  <button @click="passValueToGrandpa">点击传递值</button>
</template>

<script setup>
import { ref } from 'vue';

const value = ref('这是孙子组件的数据');

function passValueToGrandpa() {
  // 将数据通过emit事件传递给父组件
  this.$emit('update:value', value.value);
}
</script>

然后在爷爷组件接收这个值的地方：

<template>
  <child-component :value.sync="receivedValue"></child-component>
</template>

<script>
import ChildComponent from './ChildComponent.vue';
export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      receivedValue: ''
    };
  }
};
</script>

当`childComponent`的值发生变化时，`receivedValue`也会同步更新。