vue多层组件之间的传值和接收provide inject```js ```从跟组件向第四个组件传值，层层传递:coun

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入vue -->
    <script src="https://unpkg.com/vue@next"></script>
  </head>
  <body>
    <div id="root"></div>
  </body>
  <script>
    // 从跟组件向第四个组件传值，层层传递:count="count"，层层接收porps:[]，最后一个显示出来这个变量
    // 也可用provide inject，把data改为provide{}从跟组件传，最后一个接收
    //   <!-- 跟组件，里面用了一个全局同步子组件 -->
    // 并向里面传值 v-bind:
    const app = Vue.createApp({
      // 定义变量
      data() {
        return {
          hello: "hello world",
          count: 11111,
        };
      },
      // 传递
      provide() {
        return {
          count: this.count,
        };
      },
      // 模板
      template: `<second :count='count' />`,
    });
    // 定义第二个组件，里面使用第三个组件
    app.component("second", {
      template: `<third :count='count' />`,
    });
    // 定义第三个组件，里面使用第四个组件
    app.component("third", {
      template: `<forth :count='count' />`,
    });
    // 定义四个组件，里面接收跟组件传过来的值
    app.component("forth", {
      // 接收父组件的值,并显示到页面
      //   inject和provide一样的书写方式
      inject: ["count"],
      template: `
        <h1>{{count}}</h1>
        `,
    });
    //   <!-- 跟组件绑定 -->

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