说说Vue组件传值有哪些-技术鸭论坛-前端交流-技术鸭(jishuya.cn)

说说Vue组件传值有哪些

父传子

1、父传子的第一种方法

父组件通过自定义属性传递,子组件通过 props 接收?

接收到的数据可以改吗?简单数据类型不能改,复杂数据类型引用不能改内容可以改,但是即便如此,也不建议直接改,为什么?

单项数据流思想:如果任何一个地方都可以修改数据,应用复杂出现错误的时候,意味着这个错误可能是任何一个地方导致的,不方便追溯!

怎么处理比较好?数据在哪来的就在哪改!

2、父传子的第二种方式

父亲通过 ref 获取子组件实例,调用此实例的方法的同时并传递参数,儿子方法中接收到参数做对应的修改!

3、父传子的第三种方式

this.$children[0].changeAge(this.age)

4、父传子的第四种方式

// 非 props 属性
this.$attrs

子传父

1、儿子通过 $emit 触发父亲自定义事件的同时并传递数据,父亲监听自定义事件的同时在回调里面进行数据修改的操作

2、this.$parent 拿到父组件实例的同时,调用方法并传参

3、例如父传子,只不过传递的是一个方法,子组件调用这个方法的同时并传递参数

4、通过 this.$listeners 拿到父亲的自定义事件,调用并传参

兄弟

1、状态(数据)提升

A 修改 B,把 B 中的数据提升到公共的父组件里面,A 通过子传父修改父亲的数据,父亲通过父传子传递把数据传递到 B

2、EventBus(事件中心、发布订阅)

Vue3 中 EventBus 被废弃了,你觉得为什么?

太过于灵活,大型项目不太方便追溯问题;由于 EventBus 本身实现起来足够简单,Vue3 处于自身体积更小的考虑,所以被废弃了!

如果我还想再用怎么办?官方推荐了两个包,例如 mitt 或 tiny-emitter 或者自己实现一个

export default class EventBus {
  constructor() {
    this.subs = {}
  }
  // 订阅 => 订阅的是一个回调函数
  on(eventType, callback) {
    this.subs[eventType]
      ? this.subs[eventType].push(callback)
      : (this.subs[eventType] = [callback])
  }
  // 发布 => 发布事件让其(事件)对应的回到函数执行
  emit(eventType, ...args) {
    this.subs[eventType].forEach((callback) => callback(...args))
  }
}

全局的数据通信和共享(Vuex)

Vuex 主要分两方面:配置项;触发流程;

mutation 里面可以放异步吗?

非严格模式确实是可以放异步,代码也可以正常执行!严格模式下不能这样操作(写异步),会有警告。

不建议放异步代码,目的是为了形成数据快照(拿到当时的那个数据状态),为了配合 DevTools 调试。

请登录后发表评论

    请登录后查看回复内容