Vue 组件通信总结

父-子组件通信

通过Props / Attrs,注意:

  • 此处不区分是否加引号,若不bind,皆作字符串处理,否则作为表达式处理
  • 若传入对象,则子组件上的该对象与父组件中的该对象指向同一个地址,如果希望对传入的对象进行修改且不影响父组件,则需要看情况对其进行深、浅拷贝
  • 若传入的属性在父组件中会发生变化,则将其放置在子组件的computed或watch(deep:true)中以检测变化
  • 若要根据该属性去修改以此为基础的其他属性,则使用computed的get/set或watch(deep:true)
    ps: 也可以直接在父组件中获取子组件的实例从而再调用子组件的方法、访问子组件的属性等(不常用)

子-父组件通信

  • 通过给子组件绑定事件,父组件监听子组件事件或$emit 触发的自定义事件,从而获取子组件传入的实参数据
  • 通过$parent

兄弟组件通信

  • 借助公用的一个vue实例的事件来传递数据(Bus通信),即$on绑定事件,再使用$emit触发该事件
  • 兄弟组件间通过路由跳转时,可通过路由携带的params传数据
  • Vuex,比较复杂,建议庞大的系统再使用

祖先组件与子孙组件通信

  • 通过依赖注入,即provide、inject
  • 通过Attrs,由于组件传入不被props接收的属性,可以被子组件通过$attrs访问,故同样可在子组件向孙组件传递数据时使用该方法,从而达到祖孙组件与子孙组件通信,可使用v-bind=’$attrs’将没有被props接收的属性同时传递给子组件

欢迎关注、点赞

猜你喜欢

转载自blog.csdn.net/qq_33576343/article/details/83120003