vue组件之间通信总结(超详细)

时间:2021-02-25 20:44:04

组件通信在我们平时开发过程中,特别是在vue和在react中,有着举足轻重的地位。本篇将总结在vue中,组件之间通信的几种方式:

  • props、$emit
  • $parent、$children
  • $attrs、$listeners
  • provide、inject
  • eventBus
  • vuex
  • 本地存储

一、props、$emit单向数据流

vue组件之间通信总结(超详细)

father.vue:

<template>
<div>
<div>我是父亲:<input type="button" value="父亲" /> 数字为: {{num}}</div>
<son :num="num" @change="change"></son>
</div>
</template> <script>
import son from "./son.vue";
export default {
name: "Father",
components: {
son,
},
data() {
return {
num: 1,
};
},
methods:{
change(val){
this.num = val
}
}
};
</script>

son.vue:

<template>
<div>我是儿子:<input type="button" value="儿子" @click="change"/>数字为:{{num}}</div>
</template> <script>
export default {
name: "App",
components: {},
props: {
num: {
default: 0,
},
},
created() {},
methods: {
change(){
// this.num = 2 props通信是单向数据流,在这直接修改父组件传过来的num将会帮错
    // 可以用$emit传递change事件,father组件绑定change事件
    this.$emit('change', 2)

}
},
};
</script>

vue组件之间通信总结(超详细)

对于上面的场景:子组件的change事件只是为了修改父组件中某一个值,还可以有以下几种写法:

1.父组件绑定给子组件的事件使用箭头函数

father:
<son :num="num" @change="val => num = val"></son> son:
this.$emit('change', 2)

2.update:num和.sync

father:

<son :num.sync="num"></son>

son:

this.$emit('update:num', 2)//update是规定的写法,不可更换

3.v-model

先修改props和绑定的事件:

father:
<son :value="num" @input="val => num = val"></son>

son:
this.$emit('input', 2)
可用v-model简写:

<son v-model="num"></son>

二、$parent、$children

$parent、$children可直接在父子组件中调用各自的方法以及修改数据

子组件中直接:this.$parent.num = 2

父组件中需要用ref来选中指定的子组件

vue官方并不推荐使用这种通信方式:节制地使用 $parent 和 $children - 它们的主要目的是作为访问组件的应急方法,更推荐用 props 和 events 实现父子组件通信。

三、$attrs、$listeners

$attrs可以拿到父组件传过来的属性:

<div>我是儿子:<input type="button" value="儿子" @click="change"/>数字为:{{$attrs}}</div>

vue组件之间通信总结(超详细)

dom节点:

vue组件之间通信总结(超详细)

$attrs会直接将传过来的属性放到对应的标签上,反观props就不会。如果想去掉标签中的这些属性,可以用inheritAttrs:

vue组件之间通信总结(超详细)

值得注意的是:props的优先级大于$attrs,即当props存在的时候,$attrs为空对象:

vue组件之间通信总结(超详细)

$attrs常用于跨多级组件传递属性,比如祖孙组件,用父组件做中转:

father:

<son v-bind="$attrs"></son>

$attrs用于属性跨级传递,方法跨级传递则用$listeners。

grandFather.vue:

<template>
<div>
<div>我是祖父: 数字为:{{nums}}</div>
<father :nums="nums" @up="up" @down="down"></father>
  </div>
</template> <script>
import father from "./father.vue";
export default {
name: "App",
components: {
father,
},
data(){
return {
nums:0
}
},
methods: {
up() {
alert('up')
},
  down() {
   alert('down')
  },
},
};
</script>

father.vue:

<son v-bind="$attrs" v-on="$listeners"></son>

son.vue:

<div>我是儿子:<input type="button" value="儿子" @click="$listeners.up"/></div>

vue组件之间通信总结(超详细)

四、provide、inject

这对选项需要一起使用,以允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在其上下游关系成立的时间里始终生效

provide选项应该是一个对象或返回一个对象的函数。

inject选项应该是一个字符串数组或一个对象。

App:

...

export default {
provide(){
return {vm: this}
}, ...

son:

...

export default {
inject: ['vm'],

 data(){},

 mounted(){
  console.log(this.vm)
} ...

vue组件之间通信总结(超详细)

注意:provide 和 inject 绑定并不是可响应的。这是刻意为之的。然而,如果你传入了一个可监听的对象,那么其对象的 property 还是可响应的。

   inject注入中的值会沿着组件向上查找,遵从"就近原则"。

   provide 和 inject中的数据流是双向的。

五、eventBus(事件总线)

eventBus通过发布订阅全局事件,供其他组件使用。

在main.js中:

Vue.prototype.$bus = new Vue();

parent.vue:

<template>
<div>
<son1></son1>
<son2></son2>
</div>
</template> <script>
import son1 from './son1.vue'
import son2 from './son2.vue'
export default {
name: 'parent',
components: {
son1,
son2
},
created(){
this.$bus.$on('busEvent',(v)=>{
console.log(v);
})
},
beforeDestroy(){
this.$bus.off('busEvent')
}
}
</script>

son1和son2中的mounted:

son1:
mounted(){
this.$bus.$emit('busEvent','son1哈哈')
}

son2:
mounted(){
this.$bus.$emit('busEvent', 'son2嘻嘻')
}

打印结果:

vue组件之间通信总结(超详细)

使用eventBus有两点需要注意,1.$bus.on应该在created钩子内使用,如果在mounted使用,它可能接收不到其他组件来自created钩子内发出的事件;

                2.$bus.emit应该在mounted中使用,等待created中的$bus.on事件绑定完成;

                3.发布订阅的事件在beforeDestory钩子里需要使用$bus.off解除,组件销毁后没必要一直监听。

接下来还有vuex和storage实现组件通信,明天补上~

脚踏实地行,海阔天空飞~