vue.js父子组件通信的一些方法总结

说明

VUE组件间通信的方法很多种,也说明没有万能的一种解决方案。
记录一下各自的用法和特点。

1.父子通信 props

这是最基本的组件使用方式了,使用一个可展示多种内容的组件,就要留有一个能给他传入各种数据的入口。

用法:

<blog-post v-bind:title="post.title"></blog-post>
给组件传入不同的title。

特点:

所有的 prop 都使得其父子 prop 之间形成了一个单向下行绑定:父级 prop 的更新会向下流动到子组件中,但是反过来则不行。这样会防止从子组件意外改变父级组件的状态,从而导致你的应用的数据流向难以理解。porp值无法修改。如果想要修改可使用两种变通:

  • data:
props: ['initialCounter'],
data: function () {
  return {
    counter: this.initialCounter
  }
}
  • computed
props: ['size'],
computed: {
  normalizedSize: function () {
    return this.size.trim().toLowerCase()
  }
}

2.直接访问root, parent, refs

this.$root.baz()

this.$parent.map

<base-input ref="usernameInput"></base-input>
this.$refs.usernameInput

特点:非响应式,渲染之后才可以实现。耦合度高

3.依赖注入

可将数据和方法导出提供下级

provide: function () {  ///父组件提供
  return {
    getMap: this.getMap
  }
}

///子组件或者子子组件注入
inject: ['getMap']

特点:类似大型props

4.vuex

这个不多说了,完整的系统和文档
https://vuex.vuejs.org/zh/

发布了22 篇原创文章 · 获赞 8 · 访问量 1万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览