vue 组件通信(vue 组件通信 原理)
Vue是一个非常流行的前端框架，它的组件化开发模式使得前端开发更加简单，易于维护。Vue组件之间的通信一直是一个让人感到神秘的话题。我们将会揭开Vue组件之间通信的神秘面纱，让你了解Vue组件通信的原理和常用的方法。
Vue组件通信的原理
Vue组件通信的原理是通过父子组件之间的props和事件来实现的。父组件通过props向子组件传递数据，子组件通过事件向父组件发送消息。这种父子组件之间的通信方式非常灵活，可以满足各种各样的需求。
Vue组件通信的方法
props是Vue组件之间通信的一种基本方式。父组件通过props向子组件传递数据，子组件通过props接收数据。这种方式适用于父组件向子组件单向传递数据的情况。
$emit是Vue组件之间通信的另一种方式。子组件通过$emit触发一个事件，父组件通过v-on监听这个事件并执行相应的操作。这种方式适用于子组件向父组件单向传递数据的情况。
3. $parent和$children
$parent和$children是Vue组件之间通信的一种方式。$parent可以访问父组件的数据和方法，$children可以访问子组件的数据和方法。这种方式适用于父子组件之间需要相互访问的情况。
$refs是Vue组件之间通信的一种方式。通过给子组件设置ref属性，父组件可以通过$refs访问子组件的数据和方法。这种方式适用于父组件需要访问子组件的数据和方法的情况。
Vue组件通信是Vue开发中非常重要的一部分，掌握好组件通信的方法可以使得开发更加高效和简单。在实际开发中，要根据具体的需求选择合适的通信方式，避免出现不必要的问题。希望能够让你对Vue组件通信有更深入的了解。
Vuex的使用及组件通信方式
Vuex是通过全局注入store对象，来实现组件间的状态共享。 在大型复杂的项目中（多级组件嵌套），需要实现一个组件更改某个数据，多个组件自动获取更改后的数据进行业务逻辑处理，这时候使用vuex比较合适。 假如只是多个组件间传递数据，使用vuex未免有点大材小用，其实只用使用组件间常用的通信方法即可。 Vue组件简单常用的通信方式有以下几种： 1、父子通信：父向子传值，通过props；子向父传值通过events ($emit)；父调用子方法通过ref；provide / inject。 2、兄弟通信：bus 3、跨级嵌套通信：bus；provide / inject等。 Vuex有以下几个部分构成： 1）state state是存储的单一状态，是存储的基本数据。 2）Getters getters是store的计算属性，对state的加工，是派生出来的数据。 就像computed计算属性一样，getter返回的值会根据它的依赖被缓存起来，且只有当它的依赖值发生改变才会被重新计算。 3）Mutations mutations提交更改数据，使用方法更改state存储的状态。 （mutations同步函数） 4）Actions actions像一个装饰器，提交mutation，而不是直接变更状态。 （actions可以包含任何异步操作） 5）Module Module是store分割的模块，每个模块拥有自己的state、getters、mutations、actions。 const moduleA = { state: { ... }, mutations: { ... }, actions: { ... }, getters: { ... } } const moduleB = { state: { ... }, mutations: { ... }, actions: { ... } } const store = new ({ modules: { a: moduleA, b: moduleB } }) .a // -> moduleA 的状态 .b // -> moduleB 的状态 触发异步请求操作： this.$(reqHomeData) actions中： async reqHomeData({ commit }) { const result = await (); commit(GET_HOME_DATA, { homeList: result }) }, mutations中： [GET_HOME_DATA](state, { homeList }) { = homeList },
vue3组件通信与props
在 Vue 3 中，组件是构建用户界面的基本单位，它们是可复用的 Vue 实例，具有自己的模板、数据、方法等。 组件化开发使得代码更加模块化，易于管理和维护。 以下是 Vue 3 组件的基础知识：在 Vue 3 中，组件需要先定义后使用。 定义组件的方式有两种：全局注册和局部注册。 全局注册的组件可以在任何地方使用，通过 方法进行注册。 局部注册的组件只能在注册它的组件内部使用，通常在组件的components 选项中进行注册。 组件选项包括模板、数据、方法、生命周期钩子等。 组件的模板定义了组件的结构，可以使用 HTML 和 Vue 的模板语法。 组件的数据是响应式的，需要是一个函数，返回一个数据对象。 组件的方法定义在methods 选项中，可以在模板中通过事件绑定来调用。 Vue 3 提供了多个生命周期钩子，允许你在组件的不同阶段执行代码。 组件之间的通信是 Vue 应用中的常见需求，Vue 3 提供了多种通信方式，包括 props、自定义事件、插槽等。 Props 允许父组件向子组件传递数据，自定义事件子组件可以通过自定义事件向父组件传递数据，插槽允许父组件向子组件传递内容。 Vue 3 鼓励组件的复用和组合，通过 props、插槽等方式，可以构建出高度可复用的组件库。 在 Vue 3 中，定义props 的方式有几种，包括使用字符串数组、对象形式以及使用 TypeScript 的类型注解。 props 的传递在父组件中，通过在模板中使用v-bind 指令或者简写为 : 来传递 props。 中的 props 验证是指对组件传入的 props 进行类型检查和默认值设置等验证，有助于确保组件接收到的数据是预期的类型和格式。 动态 Props 指的是父组件向子组件传递的 Props 值可以在运行时动态确定。 在 Vue 中，单向数据流指的是数据只能从父组件流向子组件，不能反向流动。 这是通过 props 和 emit 方法实现的。 父子组件通信主要有以下几种方式：发送消息给父组件、接收消息来自父组件。 非父子组件通信有以下几种方式：通过事件总线来实现。 总结， 通过提供灵活的组件通信机制，使得前端开发更加高效和模块化，同时也提高了应用的可维护性。
vue组件间通信
在父组件页面使用 v-bind: 或 : 将数据传递给子组件，子组件通过 props 获取父组件传递过来的值。
多级组件嵌套需要传递数据时，通常使用的方法是通过vuex。 但如果仅仅是传递数据，而不做中间处理，使用 vuex 处理，未免有点大材小用。 为此Vue2.4 版本提供了另一种方法---- $attrs ；
示例： 我们向子组件son传递5个属性，再由子组件son向孙子组件grandson传递4个属性（这4个组件不做任何处理，只是传递），son组件向grandson组件传递的那4个属性就可以使用 v-bind=$attrs 。
通常和 $attrs 配合使用。
简单来说，使用 interitAttrs: false 子组件的$attrs不会被当做是html属性渲染到根元素上，防止修改html同名属性。
在子组件页面使用 this.$emit(自定义事件名, 数据); 将数据传递给父组件，父组件通过 @自定义事件名=事件处理方法名 或者 v-on:自定义事件名=事件处理方法名 获取子组件传递过来的值。
若公共组件被很多组件调用且抛出的自定义事件都不同，此时就可以使用 $listeners ；根据父组件调用的事件去决定抛出哪个自定义事件。
EventBus又称为事件总线。 在Vue中可以使用 EventBus 来作为沟通桥梁的概念，就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件，所以组件都可以上下平行地通知其他组件，但也就是太方便所以若使用不慎，就会造成难以维护的灾难，因此才需要更完善的Vuex作为状态管理中心，将通知的概念上升到共享状态层次。 更多EventBus
vuex官网
Vuex实现了一个单向数据流，在全局拥有一个State存放数据，当组件要更改State中的数据时，必须通过Mutation进行，Mutation同时提供了订阅者模式供外部插件调用获取State数据的更新。 而当所有异步操作(常见于调用后端接口异步获取更新数据)或批量的同步操作需要走Action，但Action也是无法直接修改State的，还是需要通过Mutation来修改State的数据。 最后，根据State的变化，渲染到视图上。
provide / inject 官网介绍
vue2.2.0 新增API，这对选项需要一起使用， 以允许一个祖先组件向其所有子孙后代注入一个依赖，不论组件层次有多深，并在其上下游关系成立的时间里始终生效 。 如果你熟悉 React，这与 React 的上下文特性很相似。 provide / inject API 主要解决了跨级组件间的通信问题。 官网提供了很详细的介绍，这里直接上图
由图8-1可知， this.$children 获取到的是一个vue实列数组
由图8-2可知， this.$parent 获取到的是直接父实例
由图8-3可知， this.$refs 返回的是一个使用ref注册过的对象
sessionStorage、localStorage也能实现通信，但是需要监听storage的变化，如何监听storage的变化，之前有写过这篇文章 vue 监听localStorage、sessionStorage变化 ，这里就不赘述了。
vue组件间通信的六种方式
发表评论