在这节课开始之前我们来看考虑一个问题，在多级组件中我们如何来跨级传值。

按照目前我们学习的传值方式可以使用props，但是props只能给子组件传值，如果我们需要从父组件跨级传值给子孙级组件的话，需要一级一级的传递。

就比如下面这个图示：

我们按照上图所示的方式来写代码尝试一下

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "hello world!"
      }
    },
    template: `<div>
        <child/>
    </div>`
  })

  app.component('child',{
      template:`
        <div>footer子组件</div>
        <deepChild/>
      `
  })

  app.component('deepChild',{
    template:`<div>deepChild孙子级组件</div>`
  })

  const vm = app.mount("#app")
</script>

我们写了两个组件，chid是子组件，deepChild是chid的子组件也就是根组件的孙子级组件。那现在我们想在根组件中传递值给deepChild孙子组件，我们需要先把值传递给chid然后再传递给deepChild。

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "hello world!"
      }
    },
    template: `<div>
        <child :msg="message"/>
    </div>`
  })

  app.component('child',{
      props:['msg'],
      template:`
        <div>footer子组件</div>
        <deepChild :msg="msg" />
      `
  })

  app.component('deepChild',{
    props: ['msg'],
    template:`<div>deepChild孙子级组件<br>根组件给我传递的msg:{{msg}}</div>`
  })

  const vm = app.mount("#app")
</script>

这样逐级传递，非常的麻烦，如果我们的组件嵌套得更多，更深的话，以这样的方式传递数据的话，想想就要命，维护起来也麻烦，简直就是屎山代码。

provide和inject多级组件传值

vue为我们提供了provide和inject来实现多级组件传值。如下图所示我们可以在根组件里面使用Provde提供数据，然后在孙子级组件使用Inject获取到数据。

我们来看一下代码怎么实现

<script>
  const app = Vue.createApp({
    data() {
      return {
        message: "hello world!"
      }
    },
    provide:{
      msg:"根组件数据"
    },
    template: `<div>
        <child/>
    </div>`
  })

  app.component('child',{
      template:`
        <div>footer子组件</div>
        <deepChild/>
      `
  })

  app.component('deepChild',{
    inject:['msg'],
    template:`<div>deepChild孙子级组件<br>根组件给我传递的msg:{{msg}}</div>`
  })

  const vm = app.mount("#app")
</script>

provide和inject在我们需要多级跨级传递数据时还是很有帮助的，虽然我们这个演示比较简单可能你觉得作用不大，但是当我们组件层级复杂的时候，就能立刻显示出它的优势