AI 助理
文档备案控制台
开发者社区 开发与运维 文章 正文

Vue 组件数据通信方案总结

2023-08-10 227
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： Vue 组件数据通信方案总结

背景


初识 Vue.js ，了解到组件是 Vue 的主要构成部分，但组件内部的作用域是相对独立的部分，组件之间的关系一般如下图：

1258b541025a3db1e43a2febbdeca920_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg

组件 A 与组件 B 、C 之间是父子组件，组件 B 、C 之间是兄弟组件，而组件 A 、D 之间是隔代的关系。

那么对于这些不同的关系，本文主要分享了他们之间可以采用的几种数据通信方式，例如 Props 、$emit / $on 、Vuex 等，大家可以根据自己的使用场景可以选择适合的使用方式。


一、 Prop / $emit


1、Prop 是你可以在组件上注册的一些自定义特性。当一个值传递给一个 Prop 特性的时候，它就变成了那个组件实例的一个属性。父组件向子组件传值，通过绑定属性来向子组件传入数据，子组件通过 Props 属性获取对应数据

// 父组件
<template>
  <div class="container">
    <child :title="title"></child>
  </div>
</template>
<script>
import Child from "./component/child.vue";
export default {
  name: "demo",
  data: function() {
    return {
      title: "我是父组件给的"
    };
  },
  components: {
    Child
  },
};
</script>
// 子组件
<template>
  <div class="text">{{title}}</div>
</template>
<script>
export default {
  name: 'demo',
  data: function() {},
  props: {
    title: {
      type: String
    }
  },
};
</script>


2、$emit 子组件向父组件传值（通过事件形式），子组件通过 $emit 事件向父组件发送消息，将自己的数据传递给父组件。

401fd551e6ae1f75f46ab80c02daff97_640_wx_fmt=jpeg&wxfrom=5&wx_lazy=1&wx_co=1.jpg

// 父组件
<template>
  <div class="container">
    <div class="title">{{title}}</div>
    <child @changeTitle="parentTitle"></child>
  </div>
</template>
<script>
import Child from "./component/child.vue";
export default {
  name: "demo",
  data: function() {
    return {
      title: null
    };
  },
  components: {
    Child
  },
  methods: {
    parentTitle(e) {
      this.title = e;
    }
  }
};
</script>
// 子组件
<template>
  <div class="center">
    <button @click="childTitle">我给父组件赋值</button>
  </div>
</template>
<script>
export default {
  name: 'demo',
  data() {
    return {
      key: 1
    };
  },
  methods: {
    childTitle() {
      this.$emit('changeTitle', `我给父组件的第${this.key}次`);
      this.key++;
    }
  }
};
</script>

小总结：常用的数据传输方式，父子间传递。


二、 $emit / $on


这个方法是通过创建了一个空的 vue 实例，当做 $emit 事件的处理中心（事件总线），通过他来触发以及监听事件，方便的实现了任意组件间的通信，包含父子，兄弟，隔代组件。

2a8d8ffab62e06c2f2febf468ff7290b_640_wx_fmt=gif&wxfrom=5&wx_lazy=1.gif

// 父组件
<template>
  <div class="container">
    <child1 :Event="Event"></child1>
    <child2 :Event="Event"></child2>
    <child3 :Event="Event"></child3>
  </div>
</template>
<script>
import Vue from "vue";
import Child1 from "./component/child1.vue";
import Child2 from "./component/child2.vue";
import Child3 from "./component/child3.vue";
const Event = new Vue();
export default {
  name: "demo",
  data: function() {
    return {
      Event: Event
    };
  },
  components: {
    Child1,
    Child2,
    Child3
  },
};
</script>
// 子组件1
<template>
  <div class="center">
    1.我的名字是：{{name}}
    <button @click="send">我给3组件赋值</button>
  </div>
</template>
<script>
export default {
  name: "demo1",
  data() {
    return {
      name: "政采云"
    };
  },
  props: {
    Event
  },
  methods: {
    send() {
      this.Event.$emit("message-a", this.name);
    }
  }
};
</script>
// 子组件2
<template>
  <div class="center">
    2.我的年龄是：{{age}}岁
    <button @click="send">我给3组件赋值</button>
  </div>
</template>
<script>
/* eslint-disable */
export default {
  name: "demo2",
  data() {
    return {
      age: "3"
    };
  },
  props: {
    Event
  },
  methods: {
    send() {
      this.Event.$emit("message-b", this.age);
    }
  }
};
</script>
// 子组件3
<template>
  <div class="center">我的名字是{{name}}，今年{{age}}岁</div>
</template>
<script>
export default {
  name: 'demo3',
  data() {
    return {
      name: '',
      age: ''
    };
  },
  props: {
    Event
  },
  mounted() {
    this.Event.$on('message-a', name => {
      this.name = name;
    });
    this.Event.$on('message-b', age => {
      this.age = age;
    });
  },
};
</script>

小总结：巧妙的在父子，兄弟，隔代组件中都可以互相数据通信。


三、 Vuex


Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

932e04af37335fbd9d90b9ecd13311de_640_wx_fmt=png&wxfrom=5&wx_lazy=1&wx_co=1.png

Vuex实现了一个单项数据流，通过创建一个全局的 State 数据，组件想要修改 State 数据只能通过 Mutation 来进行，例如页面上的操作想要修改 State 数据时，需要通过 Dispatch (触发 Action )，而 Action 也不能直接操作数据，还需要通过 Mutation 来修改 State 中数据，最后根据 State 中数据的变化，来渲染页面。

5bb4860f9a72f864c33fb452fb616abd_640_wx_fmt=gif&wxfrom=5&wx_lazy=1.gif

// index.js
import Vue from 'vue';
import Tpl from './index.vue';
import store from './store';
new Vue({
  store,
  render: h => h(Tpl),
}).$mount('#app');
// store
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
  state: {
    count: 1
  },
  mutations: {
    increment(state) {
      state.count++;
    },
    reduce(state) {
      state.count--;
    }
  },
  actions: {
    actIncrement({ commit }) {
      commit('increment');
    },
    actReduce({ commit }) {
      commit('reduce');
    }
  },
  getters: {
    doubleCount: state => state.count*2
  }
});
export default store;
// vue文件
<template>
  <div class="container">
    <p>我的count：{{count}}</p>
    <p>doubleCount:{{doubleCount}}</p>
    <button @click="this.actIncrement">增加</button>
    <button @click="this.actReduce">减少</button>
  </div>
</template>
<script>
import { mapGetters, mapActions, mapState } from "vuex";
export default {
  name: "demo",
  data: function() {
    return {};
  },
  components: {},
  props: {},
  computed: {
    ...mapState(["count"]),
    ...mapGetters(["doubleCount"])
  },
  methods: {
    ...mapActions(["actIncrement", "actReduce"])
  }
};
</script>


Vuex 中需要注意的点：

Mutation ：是修改State数据的唯一推荐方法，且只能进行同步操作。

Getter ：Vuex 允许在Store中定义 "Getter"（类似于 Store 的计算属性）。Getter 的返回值会根据他的依赖进行缓存，只有依赖值发生了变化，才会重新计算。

本段只是简单介绍了一下 Vuex 的运行方式，更多功能例如 Module 模块请参考官网 。

小总结：统一的维护了一份共同的 State 数据，方便组件间共同调用。


四、 $attrs / $listeners


Vue 组件间传输数据在 Vue2.4 版本后有了新方法。除了 Props 外，还有了 $attrs / $listeners。

  • $attrs：包含了父作用域中不作为 Prop 被识别 (且获取) 的特性绑定 (Class 和 Style 除外)。当一个组件没有声明任何 Prop 时，这里会包含所有父作用域的绑定 (Class 和 Style 除外)，并且可以通过 v-bind="$attrs" 传入内部组件——在创建高级别的组件时非常有用。
  • $listeners：包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件

下面来看个例子

// 父组件
<template>
  <div class="container">
    <button style="backgroundColor:lightgray" @click="reduce">减dd</button>
    <child1 :aa="aa" :bb="bb" :cc="cc" :dd="dd" @reduce="reduce"></child1>
  </div>
</template>
<script>
import Child1 from './component/child1.vue';
export default {
  name: 'demo',
  data: function() {
    return {
      aa: 1,
      bb: 2,
      cc: 3,
      dd: 100
    };
  },
  components: {
    Child1
  },
  methods: {
    reduce() {
      this.dd--;
    }
  }
};
</script>
// 子组件1
<template>
  <div>
    <div class="center">
      <p>aa:{{aa}}</p>
      <p>child1的$attrs:{{$attrs}}</p>
      <button @click="this.reduce1">组件1减dd</button>
    </div>
    <child2 v-bind="$attrs" v-on="$listeners"></child2>
  </div>
</template>
<script>
import child2 from './child2.vue';
export default {
  name: 'demo1',
  data() {
    return {};
  },
  props: {
    aa: Number
  },
  components: {
    child2
  },
  methods: {
    reduce1() {
      this.$emit('reduce');
    }
  }
};
</script>
// 子组件2
<template>
  <div>
    <div class="center">
      <p>bb:{{bb}}</p>
      <p>child2的$attrs:{{$attrs}}</p>
      <button @click="this.reduce2">组件2减dd</button>
    </div>
    <child3 v-bind="$attrs"></child3>
  </div>
</template>
<script>
import child3 from './child3.vue';
export default {
  name: 'demo1',
  data() {
    return {};
  },
  props: {
    bb: Number
  },
  components: {
    child3
  },
  methods: {
    reduce2() {
      this.$emit('reduce');
    }
  }
};
</script>
// 子组件3
<template>
  <div class="center">
    <p>child3的$attrs:{{$attrs}}</p>
  </div>
</template>
<script>
export default {
  name: 'demo3',
  data() {
    return {};
  },
  props: {
    dd: String
  },
};
</script>

简单来说，$attrs 里存放的是父组件中绑定的非 props 属性，$listeners 里面存放的是父组件中绑定的非原生事件。

小总结：当传输数据、方法较多时，无需一一填写的小技巧。


五、 Provider / Inject


Vue2.2 版本以后新增了这两个 API ，**这对选项需要一起使用，以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在起上下游关系成立的时间里始终生效。**简单来说，就是父组件通过 Provider 传入变量，任意子孙组件通过 Inject 来拿到变量。

// 父组件
<template>
  <div class="container">
    <button @click="this.changeName">我要改名字了</button>
    <p>我的名字：{{name}}</p>
    <child1></child1>
  </div>
</template>
<script>
import Child1 from './component/child1.vue';
export default {
  name: 'demo',
  data: function() {
    return {
      name: '政采云'
    };
  },
  // provide() {
  //   return {
  //     name: this.name //这种绑定方式是不可响应的
  //   };
  // },
  provide() {
    return {
      obj: this
    };
  },
  components: {
    Child1
  },
  methods: {
    changeName() {
      this.name = '政采云前端';
    }
  }
};
</script>
// 子组件
<template>
  <div>
    <div class="center">
      <!-- <p>子组件名字:{{name}}</p> -->
      <p>子组件名字:{{this.obj.name}}</p>
    </div>
    <child2></child2>
  </div>
</template>
<script>
import child2 from './child2.vue';
export default {
  name: 'demo1',
  data() {
    return {};
  },
  props: {},
  // inject: ["name"],
  inject: {
    obj: {
      default: () => {
        return {};
      }
    }
  },
  components: {
    child2
  },
};
</script>

需要注意的是：Provide 和 Inject 绑定并不是可响应的。这是刻意为之的。然而，如果你传入了一个可监听的对象，那么其对象的属性还是可响应的。

所以，如果采用的是我代码中注释的方式，父级的 name 如果改变了，子组件this.name 是不会改变的，仍然是 政采云，而当采用代码中传入一个监听对象，修改对象中属性值，是可以监听到修改的。

Provider / Inject 在项目中需要有较多公共传参时使用还是颇为方便的。

小总结：传输数据父级一次注入，子孙组件一起共享的方式。


六、 $parent / $children & $refs


  • $parent / $children：指定已创建的实例之父实例，在两者之间建立父子关系。子实例可以用 this.$parent 访问父实例，子实例被推入父实例的 $children 数组中。
  • $refs：一个对象，持有注册过 ref 特性 的所有 DOM 元素和组件实例。ref 被用来给元素或子组件注册引用信息。引用信息将会注册在父组件的 $refs 对象上。如果在普通的 DOM 元素上使用，引用指向的就是 DOM 元素；如果用在子组件上，引用就指向组件。
// 父组件
<template>
  <div class="container">
    <p>我的title：{{title}}</p>
    <p>我的name：{{name}}</p>
    <child1 ref="comp1"></child1>
    <child2 ref="comp2"></child2>
  </div>
</template>
<script>
import Child1 from './component/child1.vue';
import Child2 from './component/child2.vue';
export default {
  name: 'demo',
  data: function() {
    return {
      title: null,
      name: null,
      content: '就是我'
    };
  },
  components: {
    Child1,
    Child2
  },
  mounted() {
    const comp1 = this.$refs.comp1;
    this.title = comp1.title;
    comp1.sayHello();
    this.name = this.$children[1].title;
  },
};
</script>
// 子组件1-ref方式
<template>
  <div>
    <div class="center">我的父组件是谁:{{content}}</div>
  </div>
</template>
<script>
export default {
  name: 'demo1',
  data() {
    return {
      title: '我是子组件',
      content: null
    };
  },
  mounted() {
    this.content = this.$parent.content;
  },
  methods: {
    sayHello() {
      window.alert('Hello');
    }
  }
};
</script>
// 子组件2-children方式
<template>
  <div>
    <div class="center"></div>
  </div>
</template>
<script>
export default {
  name: 'demo1',
  data() {
    return {
      title: '我是子组件2'
    };
  },
};
</script>

通过例子可以看到这两种方式都可以父子间通信，而缺点也很统一，就是都不能跨级以及兄弟间通信。

小总结：父子组件间共享数据以及方法的便捷实践之一。


总结


组件间不同的使用场景可以分为 3 类，对应的通信方式如下：

  • 父子通信：Props / $emit，$emit / $on，Vuex，$attrs / $listeners，provide/inject，$parent / $children＆$refs
  • 兄弟通信：$emit / $on，Vuex
  • 隔代（跨级）通信：$emit / $on，Vuex，provide / inject，$attrs / $listeners

大家可以根据自己的使用场景选择不同的通信方式，当然还是都自己写写代码，试验一把来的印象深刻喽。

文章标签：
JavaScript
API
缓存
存储
关键词：
组件方案VUE.js
前端迷
目录
相关文章
34789737
|
11月前
|
JavaScript
Vue中如何实现兄弟组件之间的通信
在Vue中，兄弟组件可通过父组件中转、事件总线、Vuex/Pinia或provide/inject实现通信。小型项目推荐父组件中转或事件总线，大型项目建议使用Pinia等状态管理工具，确保数据流清晰可控，避免内存泄漏。
34789737
808 2
哇塞女孩
|
10月前
|
缓存 JavaScript
vue中的keep-alive问题（2）
vue中的keep-alive问题（2）
哇塞女孩
680 137
rvblio6ca4cug
|
人工智能 JSON JavaScript
VTJ.PRO 首发 MasterGo 设计智能识别引擎，秒级生成 Vue 代码
VTJ.PRO发布「AI MasterGo设计稿识别引擎」，成为全球首个支持解析MasterGo原生JSON文件并自动生成Vue组件的AI工具。通过双引擎架构，实现设计到代码全流程自动化，效率提升300%，助力企业降本增效，引领“设计即生产”新时代。
rvblio6ca4cug
860 1
34789737
|
JavaScript 安全
在 Vue 中，如何在回调函数中正确使用 this？
在 Vue 中，如何在回调函数中正确使用 this？
34789737
605 0
谢妹纸
|
人工智能 JavaScript 算法
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
Vue 中 key 属性的深入解析：改变 key 导致组件销毁与重建
谢妹纸
1477 0
小宋1021
|
JavaScript
vue实现任务周期cron表达式选择组件
vue实现任务周期cron表达式选择组件
小宋1021
1552 4
我们是幸福一家人
|
JavaScript UED
用组件懒加载优化Vue应用性能
用组件懒加载优化Vue应用性能
我们是幸福一家人
614 82
34789737
|
JavaScript 数据可视化 前端开发
基于 Vue 与 D3 的可拖拽拓扑图技术方案及应用案例解析
本文介绍了基于Vue和D3实现可拖拽拓扑图的技术方案与应用实例。通过Vue构建用户界面和交互逻辑，结合D3强大的数据可视化能力，实现了力导向布局、节点拖拽、交互事件等功能。文章详细讲解了数据模型设计、拖拽功能实现、组件封装及高级扩展（如节点类型定制、连接样式优化等），并提供了性能优化方案以应对大数据量场景。最终，展示了基础网络拓扑、实时更新拓扑等应用实例，为开发者提供了一套完整的实现思路和实践经验。
34789737
1845 78
游客tsrksm3mlhq4y
|
缓存 JavaScript 前端开发
Vue 基础语法介绍
Vue 基础语法介绍
游客tsrksm3mlhq4y
602 57
34789737
|
JavaScript 前端开发 开发者
Vue 自定义进度条组件封装及使用方法详解
这是一篇关于自定义进度条组件的使用指南和开发文档。文章详细介绍了如何在Vue项目中引入、注册并使用该组件，包括基础与高级示例。组件支持分段配置（如颜色、文本）、动画效果及超出进度提示等功能。同时提供了完整的代码实现，支持全局注册，并提出了优化建议，如主题支持、响应式设计等，帮助开发者更灵活地集成和定制进度条组件。资源链接已提供，适合前端开发者参考学习。
34789737
818 17

热门文章

最新文章

  • 1
    VUE之vxe-table高级表格（表格内增删改、导入、导出、自定义打印、列设置隐藏显示等）用法
  • 2
    手拉手带你用 Vue3 + VantUI 写一个移动端脚手架 系列二 （页面布局与兼容）
  • 3
    从零带你手把手实现Vue3响应式原理-下（Map和Set的处理）
  • 4
    【前端vue2面试题】2023前端最新版vue模块，高频17问(上)
  • 5
    3分钟搞懂Vue整合Echarts实现可视化界面
  • 6
    解决vue3使用element-ui
  • 7
    前端组件之Bootstrap与Ant design of Vue
  • 8
    vue3源码解析 --- 组件渲染：vnode 到真实 DOM 是如何转变的
  • 9
    Ant Design Vue中TreeSelect详解
  • 10
    Vue 结合html2canvas和jsPDF实现html页面转pdf
  • 1
    Vue 3性能优化
    625
  • 2
    vue中的keep-alive问题（2）
    680
  • 3
    Vue 3
    1210
  • 4
    vue3使用ts传参教程
    696
  • 5
    基于Vite7.1+Vue3+Pinia3+ArcoDesign网页版webos后台模板
    1099
  • 6
    Vue中如何实现兄弟组件之间的通信
    808
  • 7
    虚拟列表在Vue3中的具体应用场景有哪些？
    1134
  • 8
    除了循环引用，Vue3还有哪些常见的性能优化技巧？
    570
  • 9
    在 Vue 中，如何在回调函数中正确使用 this？
    605
  • 10
    vue3循环引用自已实现
    276

    • 相关课程

    更多
  • Spring Boot+Vue.js+FastDFS实现分布式图片服务器
  • Vue.js 入门与实战
  • Vue.js完全自学手册图文教程

    • 相关电子书

    更多
  • Vue.js 在前端服务化上的探索与实践
  • 利用编译将 Vue 组件转成 React 组件
  • Vue.js在前端服务化上的实践与探索
    • 下一篇
    一条命令迁移，帮你实现 OpenClaw 与 Hermes Agent 记忆互通！