vue2面试题:vue组件之间的通信方式有哪些?

发布时间:2024年01月25日

回答思路:1.组件通信的目的–>2.组件通信的分类–>3.组件通信的方案

1.组件通信的目的

每个组件之间都有自己独自的作用区域,组件之间的数据是无法共享的,但在实际开发工作中,我们常常需要让座组件之间共享数据,这也是组件通信的目的

2.组件通信的分类

组件间通信的分类可分为以下:
1.父子组件之间的通信
2.兄弟组件之间的通信
3.祖孙与后代组件之间的通信
4.非关系组件之间的通信

3.组件通信的方案

(1)通过props传递数据

1.适用场景:父组件传递数据给子组件
2.组件设置props属性,定义接收父组件传过来的参数
3.父组件在使用子组件标签中通过字面量来传递值
children.vue:

props:{
	name:String
	age:{
		type:Number,
		default:18,
		require:true	
	}
}

father.vue:

<children name="tom" age=18>

(2)$emit触发自定义事件

1.适用场景:子组件传递数据给父组件

2.子组件通过$emit触发自定义事件,
$emit第二个参数为传递的值

3.父组件绑定监听器获取到子组件传过来的参数
children.vue:

this.$emit('add',1)

father.vue:

<children @add="numAdd($event)" />

(3)ref

1.适用场景:子组件传递数据给父组件

2.父组件通过设置子组件ref来获取数据
father.vue:

<children ref="foo">
<div>this.$refs.foo</div>

(4)EventBus

1.适用场景:兄弟组件传值

2.创建一个中央事件总线EventBus

3.兄弟组件通过$emit触发自定义事件,第二个参数传递的值

4.另一个兄弟组件通过$on监听自定义事件

// 
class Bus { 
	constructor() { 
		this.callbacks = {}; // 事件的名字
	} 
	$on(name, fn) { 
		this.callbacks[name] = this.callbacks[name] || []; 
		this.callbacks[name].push(fn); 
	} 
	$emit(name, args) { 
		if (this.callbacks[name]) { 
		this.callbacks[name].forEach((cb) => cb(args)); 
	} 
 } 
} 
 
// main.js 
Vue.prototype.$bus = new Bus() // 将$bus挂载到 vue实例的原型上 
// 另一种方法
Vue.prototype.$bus = new Vue() // Vue已经实现了 Bus的功能

children1.vue:

this.$bus.$emit('foo')`在这里插入代码片`

children2.vue:

this.$bus.$on('foo',2)

(5)parent、root

通过共同祖辈$parent或者
$root搭建通信桥

兄弟组件:

this.$parent.on('add',this.add)

另一个兄弟组件:

this.$parent.emit('add')

(6)attrs与listeners

1.适用场景:祖先传递数据给子孙

2.设置批量向下传属性$attrs和
$listeners

3.class,style等非props属性也是通过$attrs可以将父组件中的这些特定绑定属性传递给子组件

4.可以通过v-bind="$attrs"传入内部组件

// child:没有在 props中声明 foo 
<p>{{$attrs.foo}}</p> 
 
// parent 
<HelloWorld foo="foo"/>
// 给Grandson隔代传值 
<Child2 msg="lalala" @some-event="onSomeEvent"></Child2> 
 
// Child2 的儿子
<Grandson v-bind="$attrs" v-on="$listeners"></Grandson> 
 
// Grandson 中
<div @click="$emit('some-event', 'msg from grandson')"> 
{{msg}} 
</div>

(7)provide与inject

1.在祖先组件定义Provide属性返回传递的值

2.在后代组件通过inject接收组件传递过来的值
祖先组件:

<!-- 祖先组件 -->
<template>
  <div>
    <child-component></child-component>
  </div>
</template>

<script>
export default {
  provide: {
    message: 'Hello from ancestor',
    count: 10
  },
  components: {
    ChildComponent
  }
}
</script>

后代组件:

<!-- 后代组件 -->
<template>
  <div>
    <p>{{ message }}</p>
    <p>{{ count }}</p>
  </div>
</template>

<script>
export default {
  inject: ['message', 'count']
}
</script>

(8)vuex

1.适用场景:复杂关系的组件数据传递
2.vuex作用相当于一个用来存储共享变量的容器
3.state用来存放共享变量的地方
3.getter:可以增加一个getter派生状态,相当于store中的计算属性,用来获得共享变量的值
4.mutations用来存放修改state的方法
5.actions也是用来存放修改state的方法,在mutations的基础上进行,常用来做一些异步操作

小结

1.父子数据传递:props,$emit,ref

1.1:父传子:props
1.2:子传父:$emit、ref 

2.兄弟数据传递:eventbus,$parent

3.祖孙与后代数据传递:attrs与listeners或provide与inject

4.复杂关系数据传递:vuex

文章来源:https://blog.csdn.net/laowang357/article/details/135830616
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。