父组件app.vue和子组件teacher.vue以及孙组件student.vue 从父组件传递一个（可以修改的）msg用provide和inject传递到孙组件

在Vue.js中，`app.vue`通常作为应用的根组件，负责初始化和管理整个应用的状态。为了将数据从父组件传递给子组件，你可以使用`props`属性进行单向数据绑定。对于需要在整个应用中提供和获取的数据，比如一个可以被所有子孙组件修改的`msg`，你可以借助Vue的特性`provide`和`inject`。

首先，在`app.vue`文件里：

<template>
  <div id="app">
    <teacher :msg="parentMsg" />
  </div>
</template>

<script>
export default {
  name: 'App',
  data() {
    return { parentMsg: '初始消息' };
  },
  provide() {
    // 使用provide将data提供给其他依赖它的地方
    return {
      msg: this.parentMsg
    };
  }
};
</script>

然后在`teacher.vue`组件中，注入`msg`并使用：

<template>
  <div>
    <student :msg="msg" />
  </div>
</template>

<script>
import { inject } from 'vue';
export default {
  name: 'Teacher',
  props: {
    msg: String
  },
  components: {
    Student
  },
  created() {
    // 使用inject接收并使用来自app的msg
    this.$root.$on('updateMsg', (newMsg) => {
      this.msg = newMsg;
    });
  },
  beforeDestroy() {
    // 在销毁前解绑事件监听
    this.$root.$off('updateMsg');
  }
};
</script>

接着，在`student.vue`组件内，通过`props`接收`msg`并在内部使用：

<template>
  <div>{{ msg }}</div>
</template>

<script>
export default {
  name: 'Student',
  props: {
    msg: String
  }
};
</script>

当你想在`app.vue`中更新`msg`时，可以直接操作`parentMsg`，同时触发一个自定义事件如`updateMsg`，以便于`teacher.vue`接收到新的消息并将其传递给`student.vue`：

// 更新msg
this.parentMsg = '新消息';
this.$emit('updateMsg', this.parentMsg);