详解Vue组件之间通信的七种方式
程序员文章站
2022-04-10 13:48:46
使用vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下。
父子组件之间的通信
1）props和$emit
父组件通过props将...
使用vue也有很长一段时间,但是一直以来都没对其组件之间的通信做一个总结,这次就借此总结一下。
父子组件之间的通信
1）props和$emit
父组件通过props将数据下发给props,子组件通过$emit来触发自定义事件来通知父组件进行相应的操作
具体代码如下:
```
// 父组件
<template>
<div>
<h3>props和$emit</h3>
<children v-on:changemsg="changemsg" :msg="msg"/>
</div>
</template>
<script>
import children from './children';
export default {
data() {
return {
msg: '传递的值'
}
},
components: {
children
},
methods: {
changemsg(val) {
this.msg = val;
}
}
}
</script>
// 子组件
<template>
<div>
<h3 @click="notify">{{msg}}</h3>
</div>
</template>
<script>
export default {
data(){
return {
}
},
props: ['msg'],
methods: {
notify() {
this.$emit('changemsg', '修改后的');
}
}
}
</script>
```
2)vm.$parent和vm.$children
vm.$parent: 父实例,如果当前实例有的话
vm.$children: 获取当前实例的直接直接子组件,需要注意的是$children并不保证顺序,也不是响应式的
具体代码如下:
```
// 父组件的代码
<template>
<div>
<h3>{{title}}</h3>
<button @click="amend">在父组件中修改子组件的标题</button>
<children />
</div>
</template>
<script>
import children from './children.vue';
export default {
data() {
return {
title: '父组件'
}
},
components: {
children
},
methods: {
amend() {
this.$children[0].title = '修改后的子组件标题';
}
}
}
</script>
// 子组件的代码
<template>
<div>
<h3>{{title}}</h3>
<button @click="amend">在子组件中修改父组件的标题</button>
</div>
</template>
<script>
export default {
data() {
return {
title: '子组件'
}
},
methods: {
amend() {
this.$parent.title = '修改后的父组件标题';
}
}
}
</script>
```
3)自定义事件的v-model
```
// 父组件
<template>
<div>
标题:<input type="text" v-model="mymessage"><br />
<children v-model="mymessage" />
</div>
</template>
<script>
import children from './children.vue';
export default {
data() {
return {
mymessage: '名字',
}
},
components: {
children
}
}
</script>
// 子组件
<template>
<div>
<input type="text" :value="mymessage" @input="changevalue">
</div>
</template>
<script>
export default {
model: {
prop: 'mymessage',
event: 'input'
},
props: ['mymessage'],
methods: {
changevalue(event){
this.$emit('input', event.target.value);
}
}
}
</script>
```
祖先组件和其子孙组件通信
1)provide/inject
provide/inject,允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下文关系成立的时间里始终生效
具体代码如下:
```
// 父组件
<template>
<div>
<h3>{{title}}</h3>
<children />
</div>
</template>
<script>
import children from './children.vue';
export default {
data() {
return {
title: '父组件的标题'
}
},
provide() {
return {
updatetitle: this.updatetitle
}
},
methods: {
updatetitle(title) {
this.title = title;
}
},
components: {
children
}
}
</script>
// 子组件
<template>
<div>
<button @click="changeattr">修改父组件的属性</button>
<grandson />
</div>
</template>
<script>
import grandson from './grandson.vue';
export default {
data() {
return {
}
},
inject: ['updatetitle'],
methods: {
changeattr() {
this.updatetitle('子组件修改标题');
}
},
components: {
grandson
}
}
</script>
// 孙组件
<template>
<div>
<button @click="changeattr">修改祖先组件的属性</button>
</div>
</template>
<script>
export default {
inject: ['updatetitle'],
methods: {
changeattr() {
this.updatetitle('孙组件修改标题');
}
}
}
</script>
```
2)$attrs和$listeners
组件a下面有一个组件b,组件b下面有一个组件c,如果想将组件a的数据和自定义事件传递给组件c,就可以使用$attrs和$listeners。
vm.$attrs: 当一个组件没有声明任何 prop 时(没有在props声明属性)，这里会包含所有父作用域的绑定 ，并且可以通过 v-bind="$attrs" 传入内部组件
vm.$listeners: 包含了父作用域中的 (不含 .native 修饰器的) v-on 事件监听器。它可以通过 v-on="$listeners" 传入内部组件。
具体代码如下:
```
// 父组件
<template>
<div>
<children :msg="msg" v-on:changemsg="changemsg"/>
</div>
</template>
<script>
import children from './children';
export default {
data() {
return {
msg: '下发数据',
test: '123'
}
},
components: {
children
},
methods: {
changemsg() {
this.msg = '修改后的数据';
}
}
}
</script>
// 子组件
<template>
<div>
<grandson v-bind="$attrs" v-on="$listeners"/>
</div>
</template>
<script>
import grandson from './grandson';
export default {
components: {
grandson
}
}
</script>
// 孙组件
```
<template>
<div>
<h3>{{$attrs.msg}}</h3>
<button @click="change">修改数据</button>
</div>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
change() {
this.$emit('changemsg')
}
}
}
</script>
```
```
非父子组件之间的通信
通过*事件总线来进行通信
通过新建一个vue事件的bus对象,然后通过bus.$emit来触发事件,bus.$on监听触发的事件。使用*事件总线时,需要在手动清除它,不然它会一直存在,原本只执行一次的操作,将会执行多次。
具体代码如下:
```
// 父组件
<template>
<div>
<one />
<two />
</div>
</template>
<script>
import one from './one.vue';
import two from './two.vue';
export default {
data() {
return {
}
},
components: {
one,
two
}
}
</script>
// one组件
<template>
<div>
<h3>第一个组件</h3>
<button @click="add">增加数量</button>
</div>
</template>
<script>
import {bus} from './index.js';
export default {
data() {
return {
}
},
methods: {
add() {
bus.$emit('add');
}
},
beforedestory() {
bus.$off('add');
}
}
</script>
// two组件
<template>
<div>
<h3>第二个组件</h3>
<h3>数量: {{num}}</h3>
</div>
</template>
<script>
import {bus} from './index.js';
export default {
data() {
return {
num: 1
}
},
mounted() {
bus.$on('add', () => {
this.num += 1;
})
},
beforedestroy() {
bus.$off('add');
}
}
</script>
// index.js 创建的bus
import vue from 'vue';
export const bus = new vue({
})
```
通过vuex来进行数据管理,具体内容见vuex官网
如果有什么不对的地方,或者还有什么方法我没有写到,希望大家可以提出来,谢谢。
总结
以上所述是小编给大家介绍的vue组件之间通信的七种方式，希望对大家有所帮助