百分百源码网-让建站变得如此简单！ 登录 注册 签到领金币！

主页 | 如何升级VIP | TAG标签

当前位置: 主页>网站教程>JS教程> Vue组件通讯的六种方式
分享文章到：

Vue组件通讯的六种方式

发布时间：09/01 来源：未知 浏览： 关键词：

在平常的开发历程中，父子 / 兄弟组件间的通讯是必定会碰到的啦，所以这里总结了 6 种 Vue 组件的通讯props / $e$emit / Vuex$attrs / $listeners

  1. $parent / $children 与 ref

  2. provide / inject

前言

61836563bd4c0354d5c80665441803b.png

如上图所示，A/B，B/C，B/D 组件是父子关系，C/D 是兄弟关系。那怎样按照不一样的使用处景，选中不一样的通讯方式呢？所之前提就是我们要理解不一样的通讯方式的作用和不同。

一. props / $emit

这个是我们平常用得比力多的方式之一，父组件 A 通过 props 参数向子组件 B 传递数据，B 组件通过 $emit 向 A 组件发送一个事件（携带参数数据），A组件中监听 $emit 触发的事件得到 B 向 A 发送的数据。 我们来详细说明下它的实现步骤：

1：父组件向子组件传值

// App.vue 父组件
<template>
    <a-compontent :data-a="dataA"></a-compontent>
</template>
<script>
import aCompontent from './components/A.vue';
export default {
    name: 'app',
    compontent: { aCompontent },    
    data () {        
        return {
         dataA: 'dataA数据'
       }
    }
}
// aCompontent 子组件
<template>
    <p>{{dataA}}</p> // 在子组件中把父组件传递过来的值显示出来
</template>
<script>export default {
    name: 'aCompontent',
    props: {
        dataA: {           
              //这个就是父组件中子标签自定义名字            
              type: String,
            required: true  // 或者false
        }
    }
}
</script>

2：子组件向父组件传值（通过事件方式）

// 子组件
<template>
    <p @click="sendDataToParent">点击向父组件传递数据</p>
</template>
<script>export default {
    name: 'child',
    methods:{        
        changeTitle() {
              // 自定义事件，会触发父组件的监听事件，并将数据以参数的情势传递
            this.$emit('sendDataToParent','这是子组件向父组件传递的数据'); 
        }
    }
}

// 父组件
<template>
    <child @sendDataToParent="getChildData"></child>
</template>
<script>
import child from './components/child.vue';
    export default {
    name: 'child',
    methods:{
        getChildData(data) {
            console.log(data); // 这里的得到了子组件的值
        }
    }
}
</script>

二. $emit / $on

这种方式是通过一个相似 App.vue 的实例作为一个模块的事件中心，用它来触发和监听事件，假如把它放在 App.vue 中，就可以很好的实现任何组件中的通讯，但是这种办法在项目比力大的时候不太好保护。

举个： 假设此刻有 4 个组件，Home.vue 和 A/B/C 组件，AB 这三个组件是兄弟组件，Home.vue 相当于父组件 创立一个空的 Vue 实例,将通讯事件挂载在该实例上 -

D.js
import Vue from 'vue'export default new Vue()
// 我们可以在router-view中监听change事件，也可以在mounted办法中监听
// home.vue<template>  <p>    <child-a />    <child-b />    <child-c />  </p></template>
// A组件
<template>
  <p @click="dataA">将A组件的数据发送给C组件 - {{name}}</p>
</template>
<script>
import Event from "./D";export default {  data() {    return {
      name: 'Echo'
    }
  },
  components: { Event },
  methods: {    dataA() {
      Event.$emit('data-a', this.name);
    }
  }
}
</script>
// B组件
<template>
  <p @click="dataB">将B组件的数据发送给C组件 - {{age}}</p>
</template>
<script>
import Event from "./D";export default {  data() {    return {
      age: '18'
    }
  },
  components: { Event },
  methods: {    dataB() {
      Event.$emit('data-b', this.age);
    }
  }
}
</script>
// C组件
<template>
  <p>C组件得到的数据 {{name}} {{age}}</p>
</template>
<script>
import Event from "./D";export default {  data() {    return {
      name: '',
      age: ''
    }
  },
  components: { Event },  mounted() {
    // 在模板编译完成后施行
    Event.$on('data-a', name => {
      this.name = name;
    })
    Event.$on('data-b', age => {
      this.age = age;
    })
  }
}
</script>

上面的里我们可以知道，在 C 组件的 mounted 事件中监听了 A/B 的 $emit 事件，并猎取了它传递过来的参数（由于不肯定事件什么时候触发，所以一样在 mounted / created 中监听）

三. Vuex

Vuex 是一个状态治理模式。它采纳集中式储备治理利用的所有组件的状态，并以响应的规则包管状态以一种可猜测的方式发生转变。 Vuex 利用的中心是 store（仓库，一个容器），store 包括着你的利用中大部分的状态 (state)；

这个部分就不具体介绍了，官方文档很具体了 vuex.vuejs.org/zh/guide/st…

四. $attrs / $listeners

如上图所示，这是一个多级组件的嵌套，那 A/C 组件怎样停止通讯？我们此刻可以想到的有下面几种方案：

  1. 使用 Vuex 来停止数据治理，但是使用的 vuex 的问题在于，假如项目比力小，组件间的同享状态比力少，那用 vuex 就比如杀鸡用牛刀。
  2. 利用 B 组件做中转站，当 A 组件需要把信息传给 C 组件时，B 接受 A 组件的信息，然后用 props 传给 C 组件, 但是假如嵌套的组件过多，会致使代码繁琐，代码保护比力艰难;假如 C 中状态的改动需要传递给 A, 还要使用事件系统1级级往上传递 。

在 Vue2.4 中，为理解决该需求，引入了attrs和listeners ， 新增了inheritAttrs 选项。(如下图所示)

$attrs 的作用，某些状况下需要结合 inheritAttrs 一起使用

有 4 个组件：App.vue / child1.vue / child2.vue / child3.vue，这 4 个组件离别的顺次嵌套的关系。

// App.vue
<template>
  <p id="app">
    <p>App.vue</p><hr>
    // 这里我们可以看到，app.vue向下一集的child1组件传递了5个参数，离别是name / age / job / sayHi / title
    <child1 :name="name" :age="age" :job="job" :say-Hi="say" title="App.vue的title"></child1>
  </p>
</template>
<script>
const child1 = () => import("./components/child1.vue");
export default {
  name: 'app',
  components: { child1 },  data() {    return {
      name: "Echo",
      age: "18",
      job: "FE",
      say: "this is Hi~"
    };
  }
};
</script>
// child1.vue
<template>
  <p class="child1">
    <p>child1.vue</p>
    <p>name: {{ name }}</p>
    <p>childCom1的$attrs: {{ $attrs }}</p>
    <p>可以看到，$attrs这个对象汇合中的值 = 所有传值过来的参数 - props中显示定义的参数</p>
    <hr>
    <child2 v-bind="$attrs"></child2>
  </p>
</template>
<script>
const child2 = () => import("./child2.vue");
export default {
  components: {
    child2
  },
  // 这个inheritAttrs默许值为true，不定义这个参数值就是true，可手动设定为false
  // inheritAttrs的意义在用，可以在从父组件获得参数的子组件根节点上，将所有的$attrs以dom属性的方式显示
  inheritAttrs: true, // 可以关闭主动挂载到组件根元素上的没有在props声明的属性
  props: {
    name: String // name作为props属性绑定
  },  created() {
    // 这里的$attrs就是所有从父组件传递过来的所有参数 然后 除去props中显式定义的参数后剩下的所有参数！！！
    console.log(this.$attrs); //  输出{age: "18", job: "FE", say-Hi: "this is Hi~", title: "App.vue的title"}
  }
};
</script>
// child2.vue
<template>
  <p class="child2">
    <p>child2.vue</p>
    <p>age: {{ age }}</p>
    <p>childCom2: {{ $attrs }}</p>
    <hr>
    <child3 v-bind="$attrs"></child3>
  </p>
</template>
<script>
const child3 = () => import("./child3.vue");
export default {
  components: {
    child3
  },
  // 将inheritAttrs设定为false之后，将关闭主动挂载到组件根元素上的没有在props声明的属性
  inheritAttrs: false,
  props: {
    age: String
  },  created() {
    // 同理和上面一样，$attrs这个对象汇合中的值 = 所有传值过来的参数 - props中显示定义的参数
    console.log(this.$attrs);
  }
};
</script>
// child3.vue
<template>
  <p class="child3">
    <p>child3.vue</p>
    <p>job: {{job}}</p>
    <p>title: {{title}}</p>
    <p>childCom3: {{ $attrs }}</p>
  </p>
</template>
<script>export default {
  inheritAttrs: true,
  props: {
    job: String,
    title: String
  }
};
</script>

来看下详细的显示结果：

而$listeners如何用呢，官方文档说的是：包括了父作用域中的 (不含 .native 润饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件——在创立更高层次的组件时非常有用！ 从字面意思来懂得应当是在需要接受值的父组件增添一个监听事件？话不多说，上代码

还是 3 个顺次嵌套的组件

<template>
  <p class="child1">
    <child2 v-on:upRocket="reciveRocket"></child2>
  </p>
</template>
<script>
const child2 = () => import("./child2.vue");
export default {
  components: {
    child2
  },
  methods: {    reciveRocket() {
      console.log("reciveRocket success");
    }
  }
};
</script>复制代码
<template>
  <p class="child2">
    <child3 v-bind="$attrs" v-on="$listeners"></child3>
  </p>
</template>
<script>
const child3 = () => import("./child3.vue");
export default {
  components: {
    child3
  },  created() {
    this.$emit('child2', 'child2-data');
  }
};
</script>复制代码
// child3.vue
<template>
  <p class="child3">
    <p @click="startUpRocket">child3</p>
  </p>
</template>
<script>
export default {
  methods: {    startUpRocket() {
      this.$emit("upRocket");
      console.log("startUpRocket");
    }
  }
};
</script>复制代码

这里的结果是，当我们点击 child3 组件的 child3 文字，触发 startUpRocket 事件，child1 组件就可以接收到，并触发 reciveRocket 打印结果如下：

> reciveRocket success
> startUpRocket

五. $parent / $children 与 ref

  • ref：假如在一般的 DOM 元素上使用，援用指向的就是 DOM 元素；假如用在子组件上，援用就指向组件实例
  • $parent / $children：拜访父 / 子实例

这两种方式都是直接得到组件实例，使用后可以直接调取组件的办法或拜访数据。

我们先来看个用 ref 来拜访组件的：

// child1子组件
export default {  
        data() {    
            return {
      title: 'Vue.js'
    };
  },
  methods: {    
      sayHello() {
      console.log('child1!!');
    }
  }
};
// 父组件
<template>
  <child1 @click="sayHi" ref="child1"></child1>
</template>
<script>  
export default {
    methods: {      
        sayHi () {
        const child1 = this.$refs.child1;
        console.log(child1.title);  // Vue.js
        child1.sayHello();  // 弹窗
      }
    }
  }
</script>

六. provide/inject

provide/inject 是 Vue2.2.0 新增 API,这对选项需要一起使用，以同意一个祖先组件向其所有子孙后代注入一个依靠，不管组件层次有多深，并在起上下流关系成立的时间里始终生效。假如你熟知 React，这与 React 的上下文特性很类似。

provide 和 inject 主要为高阶插件/组件库供给用例。并不引荐直接用于利用程序代码中。

由于本人对这部分的内容懂得不是很深刻，所以感乐趣的可之前往官方文档查看： cn.vuejs.org/v2/api/#pro…

总结

常见使用处景可以分为三类：

  1. 父子通讯：props / $emit；$parent / $children；$attrs/$listeners；provide / inject API； ref
  2. 兄弟通讯：Vuex
  3. 跨级通讯：Vuex；$attrs/$listeners；provide / inject API
    4.接下来我还会在我的裙里用视频讲解的方式给大家讲解【以下图中的内容】有乐趣的可以来我的扣扣裙 519293536 免费交流学习，我都会尽力帮大家哦

引荐教程：《JS教程》

以上就是Vue组件通讯的六种方式的具体内容，更多请关注百分百源码网其它相关文章！

打赏

打赏

取消

感谢您的支持，我会继续努力的!

扫码支持
扫码打赏，你说多少就多少

打开支付宝扫一扫，即可进行扫码打赏哦

百分百源码网 建议打赏1～10元，土豪随意，感谢您的阅读！

相关文章

共有150人阅读，期待你的评论！发表评论
昵称： 网址： 验证码： 点击我更换图片
最新评论

本文标签

广告赞助

能出一分力是一分吧！

订阅获得更多模板

本文标签

广告赞助

订阅获得更多模板

关于我们-免责声明-业务报价-广告服务-意见反馈-常见问题-网站地图

百分百源码网声明：本站所有模板文章除标明原创外，均来自网络转载，版权归作者所有，如果有侵犯权益，请联系本站删除！

Copyright © 2021 完整无错带数据网站源码模板下载平台! WWW.BAIDOW.COM.