祖先组件

 

<template>
  我是head{{title}}
  <v-head/>
</template>

<script>
import VHead from './components/head.vue';
import {provide, ref} from "vue";
export default {
  name: 'App',
  components: {
    VHead,
  },
  data () {
    return {
      'msg': '123',
    }
  },
  setup() {
    let title = ref('我是head的title');

    provide('title', title);
    return {
      title
    }

  }
}
</script>

子孙组件

<template>
  <section>
    123{{ abc }}

    <button @click="changeTitle">footer的提交</button>
  </section>
</template>

<script>
import { inject } from 'vue';
export default {
  name: "footer",
  setup () {
    let abc = inject('title');

    let changeTitle = () => {
      abc.value = '123'
    }
    return{
      abc,
      changeTitle
    }
  }
}
</script>