使用privide/inject和this.$refs/this.$root进行通信

最新推荐文章于 2022-05-13 11:40:29 发布

JQ...

最新推荐文章于 2022-05-13 11:40:29 发布

阅读量410

点赞数 1

分类专栏：笔记文章标签： vue

本文链接：https://blog.csdn.net/weixin_42201272/article/details/106097421

版权

笔记专栏收录该内容

18 篇文章 0 订阅

订阅专栏

介绍

通常在vue中我们会经常使用到一些组件间的通信方法，比如父-子、子-父、兄弟、vue-bus、vuex等，那么除了这些还有没有其他的通信方式呢。当然，今儿我就找到了另外的两种方法，privide/inject和this.$ refs / this.$ root
注意：以下步骤所用代码都来自完整代码，为了方便阅读，有些地方进行了删除

privide/inject及this.$ refs/this.$ root

完整代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  </head>
  <body>
    <div id="app">
      <father> </father>
    </div>
    <script>
      Vue.component("father", {
        provide: {
          foo: "father的值",
        },

        data() {
          return {
            msg: "老父亲的值",
          };
        },
        mounted() {
          console.log(this.foo);

          console.log("在父亲中拿全局", this.$root.msg);
        },
        template: `
          <div>

              <children>

               </children>
           </div>
        `,
      });
      Vue.component("children", {
        inject: ["foo"],
        data() {
          return {
            msg: "儿子的值",
          };
        },
        template: `<div>
          <!-- 给孙子的组件绑定一个ref -->
          {{this.foo}}
          <grandSon ref='grandSonData'></grandSon>
                  </div>`,
        mounted() {
          // 可以通过this.$refs.grandSonData.msg拿到值
          console.log(this.$refs.grandSonData.msg);
          console.log("在儿子中拿全局", this.$root.msg);
        },
      });
      Vue.component("grandSon", {
        inject: ["foo"],

        data() {
          return {
            msg: "孙子的值",
          };
        },
        mounted() {
          console.log(this.foo);
          console.log("在孙子中拿全局", this.$root.msg);
        },
        template: `<div></div>`,
      });
      new Vue({
        el: "#app",
        data: {
          msg: "全局的值",
        },
        mounted() {
          console.log("在全局中拿全局", this.msg);
        },
      });
    </script>
  </body>
</html>

以上代码就是两种方式的介绍

1.privide/inject

这种方法俗称跨代传值，虽说夸代但是从父-子也是可以进行传递的，通过再父组件中通过provide发放要传递的值，如下：

Vue.component("father", {
        provide: {
          foo: "father的值",
        },

        data() {
          return {
            msg: "老父亲的值",
          };
        },
       
        template: `
          <div>

              <children>

               </children>
           </div>
        `,
      });

在子组件中通过inject来接收值，无论是其儿子还是孙子都可以接收到父组件中的foo传递过来的值，如下：

 Vue.component("children", {
        inject: ["foo"],
        data() {
          return {
            msg: "儿子的值",
          };
        },
        template: `<div>
          <!-- 给孙子的组件绑定一个ref -->
          {{this.foo}}
          <grandSon ref='grandSonData'></grandSon>
                  </div>`,
      
      });
   Vue.component("grandSon", {
        inject: ["foo"],

        data() {
          return {
            msg: "孙子的值",
          };
        },
       
        template: `<div></div>`,
      });

2.this.$ refs和this.$ root

this.$ refs

这种方法是在父组件中使用子组件在子组件中绑定一个名为ref的attribute来访问子组件对象，如下：
在children组件中使用grandson组件，并且在grandson组件绑定一个属性ref并命名为grandSonData

 Vue.component("children", {
      
        data() {
          return {
            msg: "儿子的值",
          };
        },
        template: `<div>
          <!-- 给孙子的组件绑定一个ref -->
          
          <grandSon ref='grandSonData'></grandSon>
                  </div>`,
        mounted() {
          // 可以通过this.$refs.grandSonData.msg拿到值
          console.log(this.$refs.grandSonData.msg);
          console.log("在儿子中拿全局", this.$root.msg);
        },
      });

此时我们就可以在dom节点加载完毕后的钩子函数中通过this.$refs.grandSonData.msg拿到grandson的msg数据

this.$ root

在子组件中我们可以通过this.$ root拿到全局的对象的数据

     Vue.component("father", {
        

       
        mounted() {
          
          console.log("在父亲中拿全局", this.$root.msg);
        },
        template: `
          <div>

              <children>

               </children>
           </div>
        `,
      });
      Vue.component("children", {
       
        data() {
          return {
            msg: "儿子的值",
          };
        },
        template: `<div>
          <!-- 给孙子的组件绑定一个ref -->
         
          <grandSon></grandSon>
                  </div>`,
        mounted() {
         
          console.log("在儿子中拿全局", this.$root.msg);
        },
      });
      Vue.component("grandSon", {
        

        data() {
          return {
            msg: "孙子的值",
          };
        },
        mounted() {
         
          console.log("在孙子中拿全局", this.$root.msg);
        },
        template: `<div></div>`,
      });
       new Vue({
        el: "#app",
        data: {
          msg: "全局的值",
        },
        mounted() {
          console.log("在全局中拿全局", this.msg);
        },
      });

请观察三个子组件，father、children、grandson，这三个子组件的mounted钩子函数中都输出了this.$ root.msg,而这个msg就是全局中的msg也就是new Vue下面data里的msg，所以可以再子组件中通通过this.$ root.msg访问全局中的data数据。

以上就是其余两种通信方式，不足之处请大家指出

JQ...

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用privide/inject和this.$refs/this.$root进行通信

前言曾几何时，你是否有坐在家里等待出去工作，期间无所事事的那段时光；曾几何时，你是否有不知所措而心中莫名空虚寂寞的痛苦岁月；曾几何时，你是否有决定让自己保持进步，不再为回想起自己空虚的一天而烦恼；如果是这样，请翻阅我的官方博客。介绍通常在vue中我们会经常使用到一些组件间的通信方法，比如父-子、子-父、兄弟、vue-bus、vuex等，那么除了这些还有没有其他的通信方式呢。当然，今儿我就找到了另外的两种方法，privide/inject和this.$ refs / this.$ root注意：以下步
复制链接

扫一扫

专栏目录