0
点赞
收藏
分享

微信扫一扫

Vue 组件之间如何进行通信?

洲行 2022-03-11 阅读 104

props (父传子)

通过 props 将数据在组件树中进行⾃上⽽下的传递。

<jack :money="count" :obj="myobj"></jack>
//父组件传值money和obj
export default {
  // props: ['money']
  props: { //子组件props接收
    money: {  //接收money
      type: Number,
      default: 1,
    },
    obj: {   //接收obj
      type: Object,
      default: () => {
        return {
          name: 'zs',
          age: 18,
        };
      },
    },
  },
};

 

$emit(子传父)

通过 $emit@ 来作信息的向上传递。

this.$emit('add-action', 参数1, 参数2, ...)
//子组件$emit传值
<jack @add-action="fatherFn"></jack>
//父组件@接收

 

eventBus 事件总线 (兄弟组件)

可通过 EventBus 进⾏信息的发布与订阅。 (创建一个都能访问到的事件总线)

main.js

Vue.prototype.$eventBus = new Vue(); // this.$eventBus
// A组件中, 监听 bus的事件
this.$eventBus.$on('事件名', function(参数1, 参数2, ...) {
	...
})

// B组件中, 触发 bus的事件
this.$eventBus.$emit('事件名', 参数1, 参数2, ...)

$children $parent $refs

(1) $children

父组件中, $children 返回的是一个组件集合,如果你能清楚的知道子组件的顺序,你也可以使用下标来操作

// 父组件中
<template>
  <div class="hello_world">
    <com-a></com-a>
    <com-b></com-b>
  </div>
</template>

 

(2) $parent

子组件中, this.$parent 指向父组件

(3) $refs

通过添加 ref 和 $refs 配合, 也可以很方便的获取子组件, 访问调用子组件的属性或方法

// 父组件中
<template>
  <div class="hello_world">
    <com-a ref="coma"></com-a> // this.$refs.coma.count = 200
    <com-b ref="comb"></com-b> // this.$refs.comb.addFn()
  </div>
</template>

 

provide inject

成对出现:provide 和 inject 是成对出现的

作用:用于父组件向子孙组件传递数据

使用方法:

  • provide 在父组件中, 返回要传给下级的数据

  • inject 在需要使用这个数据的子孙组件中注入数据。(不论组件层次有多深)

 父组件

export default {
  provide() {
    return {
      value: this.value, // 共享给子孙组件的数据
    };
  },
  data() {
    return {
      value: '父组件的数据',
      money: 100,
    };
  },
};

子孙组件

export default {
    inject: ['value'],
    props: {
        ...
    }
}

 

$attrs $listeners

在 Vue 2.4 版本中加⼊的 $attrs$listeners 可以用来作为跨级组件之间的通信机制。 (父传孙)

父组件

<template>
  <div>
    <my-child1 :money="100" desc='你好哇' @test1="fn1" @test2="fn2"></my-child1>
  </div>
</template>

子组件

<template>
  <div class="my-child1">
    <!-- $attrs => { "money": 100, "desc": "你好哇" } -->
    <div>{{ $attrs }}</div>
    <my-child2 v-bind="$attrs" v-on="$listeners"></my-child2>
  </div>
</template>

<script>
import MyChild2 from './my-child2';
export default {
  created() {
    console.log(this.$listeners);
  },
  components: {
    MyChild2,
  },
};
</script>

孙组件

<template>
  <div>
    我是child2 - {{ money }} - {{ desc }}
    <button @click="clickFn">按钮</button>
  </div>
</template>

<script>
export default {
  props: ['money', 'desc'],
  methods: {
    clickFn () {
      this.$emit('test1', '嘎嘎')
      this.$emit('test2', '嘿嘿')
    }
  }
}
</script>

Vuex

全局状态管理库。可通过它来进行全局数据流的管理。

state: 存放数据

mutations: 存放操作数据的方法

actions: 存放一些异步操作 (也可以进行一些同步处理) 注意: actions 是不能直接修改 state 数据的, 需要提交 mutation

getters: 存放基于 state 计算出来的一些值 (计算属性)

modules: 分模块, 项目大了, 也推荐分模块管理 (同模块的 vuex 操作, 就会在一起)

mapState、、、、、、

举报

相关推荐

0 条评论