vue指令如何实现组件通信

本文小编为大家详细介绍“vue指令如何实现组件通信”，内容详细，步骤清晰，细节处理妥当，希望这篇“vue指令如何实现组件通信”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。 vue指令实现组件通信的方法：1、父组件通过“props”的方式向子组件传递数据，而通过“$emit”子组件可以向父组件通信；2、通过“ref/$refs”属性实现组件通信；3、通过eventBus事件总线实现组件通信；4、使用Vuex实现组件通信；5、通过“$attrs”与“$listeners”实现组件通信等。Vue实现组件间通信的七种方式父组件通过props的方式向子组件传递数据，而通过$emit 子组件可以向父组件通信:父传子：父组件通过import引入子组件，并注册，在子组件标签上添加要传递的属性，子组 件通过props接收，接收有两种形式一是通过数组形式[‘要接收的属性’ ]，二是通过对象形式{ }子传父：父组件向子组件传递事件方法，子组件通过$emit触发事件，回调给父组件props的特点：props只能是父组件向子组件进行传值，props使得父子组件之间形成一个单向的下行绑定。子组件的数据会随着父组件的更新而响应式更新；但是子组件无法引起父组件的数据更新。props可以显示定义一个或一个以上的数据，对于接收的数据，可以是各种数据类型，同样也可以是传递一个对象或函数。props属性名规则：若在props中使用驼峰形式，模板中标签需要使用短横线的形式来书写。代码示例：父组件：子组件：{{msg}}$emit 绑定一个自定义事件，当这个事件被执行的时候就会将参数传递给父组件，而父组件通过v-on监听并接收参数父组件：{{currentIndex}}子组件：ref：这个属性用在子组件上，它的引用就指向了该子组件的实例，可以通过实例来访问组件的数据和方法；如果在普通的 DOM 元素上使用，引用指向的就是 DOM元素。父组件：子组件：其原理就是：事件订阅发布，eventBus 又称为事件总线，在vue中可以使用它来作为沟通桥梁的概念, 就像是所有组件共用相同的事件中心，可以向该中心注册发送事件或接收事件， 所以组件都可以通知其他组件。使用步骤如下：firstCom和secondCom的父组件：在firstCom组件中发送事件：在secondCom组件中接收事件：在上述代码中，这就相当于将num值存贮在了事件总线中，在其他组件中可以直接访问。事件总线就相当于一个桥梁，不用组件通过它来通信。虽然看起来比较简单，但是这种方法也有不变之处，如果项目过大，使用这种方式进行通信，后期维护起来会很困难。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化.Vuex 解决了多个视图依赖于同一状态和来自不同视图的行为需要变更同一状态的问题，将开发者的精力聚焦于数据的更新而不是数据在组件之间的传递上Vuex各个模块:state：用于数据的存储，是store中的唯一数据源getters：如vue中的计算属性一样，基于state数据的二次包装，常用于数据的筛选和多个数据的相关性计算mutations：类似函数，改变state数据的唯一途径，且不能用于处理异步事件actions：类似于mutation，用于提交mutation来改变状态，而不直接变更状态，可以包含任意异步操作modules：类似于命名空间，用于项目中将各个模块的状态分开定义和操作，便于维护Vuex使用步骤：（1）这里我们先新建 store文件夹， 对Vuex进行一些封装处理在 store 文件夹下添加 index.js 文件（2）在 store 文件夹下添加 module 文件夹，在module文件夹再新建 user.js 文件（3）然后在项目的 main.js 文件中引入（4）封装很愉快结束了了，然后就正常操作即可现在我们来讨论另一种情况：如果我们给出的组件关系图中A组件与D组件是隔代关系， 那它们之前进行通信有哪些方式呢？使用props绑定来进行一级一级的信息传递, 如果D组件中状态改变需要传递数据给A, 使用事件系统一级级往上传递使用eventBus,这种情况下还是比较适合使用, 但是碰到多人合作开发时, 代码维护性较低, 可读性也低使用Vuex来进行数据管理, 但是如果仅仅是传递数据, 而不做中间处理,使用Vuex处理感觉有点大材小用了.所以就有了 $attrs / $listeners ，通常配合 inheritAttrs 一起使用。默认情况下父作用域的不被认作 props 的 attribute 绑定 (attribute bindings) 将会“回退”且作为普通的 HTML attribute 应用在子组件的根元素上。当撰写包裹一个目标元素或另一个组件的组件时，这可能不会总是符合预期行为。通过设置 inheritAttrs 到 false，这些默认行为将会被去掉。而通过实例 property $attrs 可以让这些 attribute 生效，且可以通过 v-bind 显性的绑定到非根元素上。注意：这个选项不影响 class 和 style 绑定，Vue对class和style做了特殊处理简单来说就是inheritAttrs：true 时继承除props之外的所有属性inheritAttrs：false 只继承class 和 style属性$attrs：包含了父作用域中不被认为 (且不预期为) props 的特性绑定 (class 和 style 除外)，并且可以通过 v-bind=”$attrs” 传入内部组件。当一个组件没有声明任何 props 时，它包含所有父作用域的绑定 (class 和 style 除外)。$listeners：包含了父作用域中的 (不含 .native 修饰符) v-on 事件监听器。它可以通过 v-on=”$listeners” 传入内部组件。它是一个对象，里面包含了作用在这个组件上的所有事件监听器，相当于子组件继承了父组件的事件。代码示例：父组件：儿子组件：孙子组件：使用$parent可以让组件访问父组件的实例（访问的是上一级父组件的属性和方法）。使用 $children 可以让组件访问子组件的实例，但是， $children 并不能保证顺序，并且访问的数据也不是响应式的。注意：通过 $parent 访问到的是上一级父组件的实例，可以使用 $root 来访问根组件的实例在组件中使用$children拿到的是所有的子组件的实例，它是一个数组，并且是无序的在根组件 #app 上拿 $parent 得到的是 new Vue()的实例，在这实例上再拿 $parent 得到的是undefined，而在最底层的子组件拿 $children 是个空数组$children 的值是数组，而 $parent是个对象子组件：父组件的值为: {{parentVal}}父组件：这种方式就是vue中依赖注入，该方法用于 父子组件之间 的通信。当然这里所说的父子不一定是真正的父子，也可以是祖孙组件，在层数很深的情况下，可以使用这种方式来进行传值。就不用一层一层的传递数据了。provide和inject是vue提供的两个钩子，和data、methods是同级的。并且provide的书写形式和data一样。provide 钩子用来发送数据或方法inject钩子用来接收数据或方法注意： 依赖免费云主机、域名注入所提供的属性是非响应式的。用法：父组件：子组件：还有另一种写法，这种写法可以访问父组件中的所有属性：读到这里，这篇“vue指令如何实现组件通信”文章已经介绍完毕，想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会，如果想了解更多相关内容的文章，欢迎关注云技术行业资讯频道。免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@byun.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。

相关推荐: react如何实现删除功能

这篇文章主要介绍“react如何实现删除功能”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“react如何实现删除功能”文章能帮助大家解决问题。 react实现删除功能的方法：1、给li标签添加一个点击事件，代码如“ R…