Vue 구성요소 통신: 교차 레벨 구성요소 통신을 위해 제공/주입을 사용합니다.

// Parent.vue
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      // 提供message数据给子组件使用
      message: 'Hello from parent!'
    }
  }
}
</script>

// ChildComponent.vue
<template>
  <div>
    <grand-child-component></grand-child-component>
  </div>
</template>

<script>
import GrandChildComponent from './GrandChildComponent.vue';

export default {
  components: {
    GrandChildComponent
  },
  inject: ['message'] // 注入父组件提供的message数据
}
</script>

// GrandChildComponent.vue
<template>
  <div>
    <p>{{ message }}</p>
  </div>
</template>

<script>
export default {
  inject: ['message'] // 注入父组件提供的message数据
}
</script>

// Parent.vue
<template>
  <div>
    <button @click="updateMessage">Update Message</button>
    <child-component></child-component>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  provide() {
    return {
      message: this.message
    }
  },
  data() {
    return {
      message: 'Hello from parent!'
    }
  },
  methods: {
    updateMessage() {
      this.message = 'Updated message from parent!';
    }
  }
}
</script>