Vue组件间通信的六种方式

向右看齐 2024-03-16 16:59 44阅读 0赞

### 第一种（props） ###

**使用场景**：父子组件通信

*如果父组件给子组件传递函数：本质是子组件给父组件传递*

*如果父组件给子组件传递非函数：本质是父组件给子组件传递*

//只接收：
    props: ['todos']
    //限制类型：
    props: {
        name: String}
    //限制类型、限制必要性、指定默认值：
    props: {
        
        name: {
        
            type: String, 
            required: true,
            default: 'zhangsan'
        }
    }

**路由的props**

书写形式：对象，布尔值（只能接收params参数），函数形式

### 第二种（自定义事件） ###

**使用场景**：子组件给父组件传递数据

在父组件中给子组件绑定自定义事件（事件的回调在父组件中）

// 给Student绑定自定义事件
    <Student @atguigu="getStudentName"/>
    this.$refs.student.$on('atguigu', this.getStudentName)
    
    // 触发Student组件身上的atguigu事件
    this.$emit('atguigu', '回传的数据')

### 第三种（全局事件总线$bus） ###

**使用场景**：万能

Vue.prototype.$bus = this

![fc4c5294929b48c0b98251cb0abf3118.png][]

### 第四种（pubsub-js） ###

发布与订阅，（在React种使用较多）

**使用场景**：万能

### 第五种（插槽） ###

**使用场景**：父子组件通信（向子组件指定位置插入html结构）

默认插槽、具名插槽、*作用域插槽*

<List :todos="todos">
        
    	<template slot-scope="{todo, $index}">
        	<span :style="{color: todo.isComplete ? 'green' : 'red'}">{
        {
        $index}}---{
        {
        todo.text}}</span>
        </template>
    </List>
    
    
    <li v-for="(item, index) in todos" :key="index">
    	<slot :todo="item" :$index="index"></slot>
    </li>

### 第六种（Vuex） ###

**使用场景**：万能

![e027ad87e53d4d3191cd2001db60783a.png][]

[fc4c5294929b48c0b98251cb0abf3118.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/cc90a87951644f82ae097f087cafcd17.png
[e027ad87e53d4d3191cd2001db60783a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/5ee764700a704dfa9ddb835b3629c81d.png