vue的跨组件传值

最新推荐文章于 2024-08-12 16:45:40 发布

@是静静啊

最新推荐文章于 2024-08-12 16:45:40 发布

阅读量81

点赞数

本文链接：https://blog.csdn.net/m0_45272038/article/details/113809369

版权

本文介绍了Vue.js中两种跨组件通信的方法：props和provide/inject。通过props从父组件向子组件传递数据，但这种方式在多级组件间传递时较为繁琐。而provide/inject则允许父组件提供值，子组件直接注入，简化了深层组件的数据传递，适用于高阶组件库的开发。文章提供了详细的代码示例来说明这两种通信方式的使用步骤和应用场景。

摘要由CSDN通过智能技术生成

文章目录

- 1、props实现跨组件传值
- 2、 provide/inject实现跨组件传值

1、props实现跨组件传值

缺点：太麻烦

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <demo :money="money"></demo>
    </div>
  </body>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <!-- Vue -->
  <script>
    Vue.component("demo", {
      props: {
        money: {
          type: String,
          default: "",
        },
      },
      template: `<div>
            <h1>demo 组件
            接收到：{{money}}
            </h1>
            <div>
                <demo-test :money="money"></demo-test>
            </div>
        </div>`,
      components: {
        "demo-test": {
          props: ["money"],
          template: `
                    <h2>demo-test 组件 {{money}}</h2>
                `,
        },
      },
    });
    let vm = new Vue({
      el: "#app",
      data: {
        money: "💴",
      },
    });
  </script>
</html>

2、 provide/inject实现跨组件传值

应用场景：主要在开发高阶插件/组件库时使用。并不推荐用于普通应用程序代码中
使用步骤：

在父组件中用provide提供值
如：

  provide: {
        money: "💴",
      },

在需要用到的组件中用inject注入值
接收:哪个组件要用就注入哪个组件

    inject:["money"],

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <demo :money="money"></demo>
    </div>
  </body>
  <script src="./node_modules/vue/dist/vue.js"></script>
  <!-- Vue -->
  <script>
    /* 
    provide/inject 注入值
    React => React.createContext => Provider Comsumer
     */
    Vue.component("demo", {
      inject: ["money"],
      template: `<div>
            <h1>demo 组件
            接收到：{{money}}
            </h1>
            <div>
                <demo-test :money="money"></demo-test>
            </div>
        </div>`,
      components: {
        "demo-test": {
          inject:["money"],
          template: `
                    <h2>demo-test 组件 {{money}}</h2>
                `,
        },
      },
    });
    let vm = new Vue({
      el: "#app",
      /* 1. 在父组件中提供值 */
      provide: {
        money: "💴",
      },
      data: {},
    });
  </script>
</html>