Vue组件传值

作者: ForeverYoung_06 | 来源:发表于2022-05-17 09:28 被阅读0次

Vue组件传值

(1)父子组件间通信

  • 子组件通过 props 属性来接受父组件的数据,然后父组件在子组件上注册监听事件,子组件通过 emit 触发事件来向父组件发送数据。
  • 通过 ref 属性给子组件设置一个名字。父组件通过 refs 组件名来获得子组件,子组件通过parent 获得父组件,这样也可以实现通信。
  • 使用 provide/inject,在父组件中通过 provide提供变量,在子组件中通过 inject 来将变量注入到组件中。不论子组件有多深,只要调用了 inject 那么就可以注入 provide中的数据。
    (2)兄弟组件间通信
  • 使用 eventBus 的方法,它的本质是通过创建一个空的 Vue 实例来作为消息传递的对象,通信的组件引入这个实例,通信的组件通过在这个实例上监听和触发事件,来实现消息的传递。
  • 通过 parent/refs 来获取到兄弟组件,也可以进行通信。
    (3)任意组件之间
  • 使用 eventBus ,其实就是创建一个事件中心,相当于中转站,可以用它来传递事件和接收事件。
    如果业务逻辑复杂,很多组件之间需要同时处理一些公共的数据,这个时候采用上面这一些方法可能不利于项目的维护。这个时候可以使用 vuex ,vuex 的思想就是将这一些公共的数据抽离出来,将它作为一个全局的变量来管理,然后其他组件就可以对这个公共数据进行读写操作,这样达到了解耦的目的。

https://juejin.cn/post/6919373017218809864#heading-39

相关文章

  • Vue - 传值

    Vue 传值有两种:1)父组件向子组件传值(属性传值,Prop传值)2)子组件向父组件传值 一、父组件向子组件传值...

  • (VUE3) 四、组件传值(父子组件传值 & 祖孙组件传值 &v

    1.父子组件传值 vue2中的父子组件传值:父组件: 子组件: vue3中的父子组件传值: 还是用props接收父...

  • VUE组件(传值,生命周期)

    VUE生命周期 VUE子传父组件通信 VUE非父子组件传值

  • 前端基础搬运工-VUE模块

    十、VUE模块 基础部分 1. Vue组件间传值 答: -[ ] 1.父子之间的传值 父组件向子组件传值通过p...

  • Vue父子组件通信和双向绑定

    本篇文章主要介绍父子组件传值,组件的数据双向绑定。 1. 基础父子组件传值 父子组件传值,这是Vue组件传值最常见...

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

  • 2019-03-13

    vue父子组件传值,(父组件向子组件传值用prop ,子组件向父组件传值:子组件调用父组件方法值以参数的方式传递)...

  • vue2.0的三种常用传值方式,并且如何实现?

    vue2.0 组件传值方式有三种:父组件向子组件传值,子组件向父组件传值,非父子组件传值 : 父传子: 首先现在父...

  • Vue组件传值

    vue组件传值 一、父组件向子组件传值方式: 1. 子组件中定义props,父组件向子组件props进行传值。 2...

  • Vue 父组件向子组件传值

    Vue 父组件向子组件传值 demo代码 (vue.js ...

网友评论

    本文标题:Vue组件传值

    本文链接:https://www.haomeiwen.com/subject/dtvnsrtx.html