Vue.js 组件通信示例：使用 inject 和 provide 传递数据

本示例演示了如何使用 Vue.js 的 inject 和 provide 属性实现组件之间的通信。

我们展示了如何通过 provide 属性将数据传递给子组件，并通过 inject 属性在子组件中接收数据。

代码示例

<!DOCTYPE html>
<html>
  <head>
    <meta charset='UTF-8' />
    <title>Vue.js 组件通信示例</title>
    <script src='../vue.js' type='text/javascript' charset='utf-8'></script>
    <script src='./data.js'></script>
    <style>
      #app {
        width: 500px;
        height: 700px;
        margin: 0 auto;
        background-color: #dcdcdc;
        box-sizing: border-box;
        padding: 20px;
      }
    </style>
  </head>

  <body>
    <div id='app'>
      <headers></headers>
      <mains> </mains>
    </div>
  </body>
  <!-- header_template -->
  <script type='text/html' id='headers'>
    <button>全选</button>
    <button>反选</button>
    <h2>总价: ¥ 1922.03</h2>
  </script>
  <!-- mains_template -->
  <script type='text/html' id='mains'>
    <div>
      <items v-for='item in goods_list' :key='item.id'>{{ item }}</items>
    </div>
  </script>
  <script type='text/html' id='items'>
    items
  </script>
  <script type='text/javascript'>
    // 注册headers
    const headers = {
      template: '#headers'
    };
    // 注册items
    const items = {
      template: '#items',
      inject: ['goods_list']
    };
    // 注册mains
    const mains = {
      template: '#mains',
      data() {
        return {};
      },
      components: {
        items
      }
    };

    Vue.createApp({
      data() {
        return {
          goods
        };
      },
      // 配置提供 依赖
      provide() {
        return {
          goods_list: this.goods
        };
      },
      components: {
        headers,
        mains
      }
    }).mount('#app');
  </script>
</html>

解释

provide 属性: 在父组件中使用 provide 属性将数据 goods_list 暴露给子组件。
inject 属性: 在子组件中使用 inject 属性接收来自父组件的 goods_list 数据。
v-for 指令: 在 <mains> 组件的 <items> 标签上使用 v-for 指令循环遍历 goods_list 数据，并渲染 <items> 组件。

注意

确保 <items> 标签是 <div> 标签的直接子元素，这样 v-for 指令才能正确地应用。
v-for 指令需要一个唯一的 key 属性，以便 Vue.js 能够追踪每个元素的标识。

通过以上步骤，我们成功地使用 inject 和 provide 属性实现了组件之间的通信，并能够在子组件中访问父组件的数据。