学习笔记——组件通信

最新推荐文章于 2025-07-15 13:31:09 发布

原创最新推荐文章于 2025-07-15 13:31:09 发布 · 1.3k 阅读

12 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#学习 #笔记 #前端

一、组件通信

1.什么是组件通信

组件通信，就是指组件与组件之间的数据传递。但是由于组件的数据是独立的，无法直接访问其他组件的数据。若想使用其他组件的数据，就需要组件通信.

2.组件间的关系

组件间的关系分为父子关系和非父子关系。

3. 组件通信的常见方式

（1）父子关系组件间的通信方式

父组件通过 **props** 将数据传递给子组件
子组件利用 **$emit** 通知父组件修改更新

代码示例

父组件

<template>
  <div class="app" style="border: 3px solid #000; margin: 10px">
    我是父组件 
    // 使用子组件
    <Son :title="myTitle" @update-title="updateTitle"></Son>
  </div>
</template>

<script>
// 导入子组件
import Son from './components/Son.vue';

export default {
  name: 'App',
  data() {
    return {
      myTitle: '父子关系组件的通信',
    };
  },
  // 注册子组件
  components: {
    Son,
  },
  methods: {
    updateTitle(newTitle) {
      this.myTitle = newTitle;
    }
  }
};
</script>

<style>
</style>

子组件

<template>
  <div class="son" style="border: 3px solid #000; margin: 10px">
    我是子组件
    <p>{{ title }}</p>
    <button @click="notifyParent">更新标题</button>
  </div>
</template>

<script>
export default {
  name: 'Son',
  // 父组件通过props将数据传给子组件
  props: {
    title: {
      type: String,
      required: true,
    },
  },
  /*
  props语法：
  props: {
    校验的属性名: {
      type: 类型,  // Number String Boolean ...
      required: true, // 是否必填
      default: 默认值, // 默认值
      validator (value) {
        // 自定义校验逻辑
        return 是否通过校验
      }
    }
  },
  */
  methods: {
    notifyParent() {
      // 子组件通过$emit通知父组件修改更新数据
      this.$emit('update-title', '新的父组件标题');
    }
  }
};
</script>

<style>
</style>

父组件通过 **props** 将数据传递给子组件图示

子组件利用 **$emit** 通知父组件修改更新图示

（2）非父子关系组件间的通信方式

①event bus 事件总线

作用

非父子组件之间，进行简易消息传递。(复杂场景→ Vuex)

步骤

创建一个都能访问的事件总线（空Vue实例）

import Vue from 'vue'
const Bus = new Vue()
export default Bus

A组件（接受方），监听Bus的 $on事件

created () {
  Bus.$on('sendMsg', (msg) => {
    this.msg = msg
  })
}

B组件（发送方），触发Bus的$emit事件

Bus.$emit('sendMsg', '这是一个消息')

图示

代码示例

EventBus.js

用于创建和导出一个 Vue 实例作为事件总线。

import Vue from 'vue'
const Bus  =  new Vue()
export default Bus

BaseA.vue(接受方)

接收从 EventBus 发送的消息。

<template>
  <div class="base-a">
    我是A组件（接收方）
    <p>{{ msg }}</p>  
  </div>
</template>

<script>
  import Bus from '../utils/EventBus';

  export default {
    data() {
      return {
        msg: '',
      };
    },
    created() {
      // 监听从 EventBus 发送的 'message' 事件
      Bus.$on('message', (payload) => {
        this.msg = payload;
      });
    },
    beforeDestroy() {
      // 移除事件监听器，防止内存泄漏
      Bus.$off('message');
    }
  };
</script>

<style scoped>
  .base-a {
    width: 200px;
    height: 200px;
    border: 3px solid #000;
    border-radius: 3px;
    margin: 10px;
  }
</style>

BaseB.vue(发送方)

发送消息到 EventBus。

<template>
  <div class="base-b">
    <div>我是B组件（发布方）</div>
    <button @click="sendMessage">发送消息</button>
  </div>
</template>

<script>
  import Bus from '../utils/EventBus';

  export default {
    methods: {
      sendMessage() {
        // 通过 EventBus 发送 'message' 事件和消息内容
        Bus.$emit('message', 'Hello from BaseB!');
      }
    }
  };
</script>

<style scoped>
  .base-b {
    width: 200px;
    height: 200px;
    border: 3px solid #000;
    border-radius: 3px;
    margin: 10px;
  }
</style>

App.vue

容纳和展示 BaseA 和 BaseB 组件

<template>
  <div class="app">
    <BaseA></BaseA>
    <BaseB></BaseB> 
  </div>
</template>

<script>
  import BaseA from './components/BaseA.vue';
  import BaseB from './components/BaseB.vue';

  export default {
    components: {
      BaseA,
      BaseB
    }
  };
</script>

<style>
</style>

②provide&inject

1.作用

跨层级共享数据

2.场景

3.语法

父组件 provide提供数据

export default {
  provide () {
    return {
       // 普通类型【非响应式】
       color: this.color, 
       // 复杂类型【响应式】
       userInfo: this.userInfo, 
    }
  }
}

2.子/孙组件 inject获取数据

export default {
  inject: ['color','userInfo'],
  created () {
    console.log(this.color, this.userInfo)
  }
}

4.注意

provide提供的简单类型的数据不是响应式的，复杂类型数据是响应式。（推荐提供复杂类型数据）
子/孙组件通过inject获取的数据，不能在自身组件内修改

（3）Vuex

vuex介绍

vuex是一个专为Vue.js应用程序不开发的状态管理库
vuex可以在多个组件之间共享数据，并且共享的数据是响应式的，即数据的变更能及时渲染到模板
vuex采用集中式存储管理所有组件的状态

安装vuex

npm install vuex@next --save

核心概念

state：状态对象，集中定义各个组件共享的数据
mutations：类似于一个事件，用于修改共享数据，要求必须是同步函数
actions：类似于mutation，可以包含异步操作，通过调用mutation来改变共享数据

vuex使用方式

创建带有vuex功能的脚手架工程

屏幕截图 2024-07-12 104237.png

定义和展示共享数据

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 集中管理多个组件共享的数据，相当于组件的全局变量，一个vuex实例对应一个store
export default new Vuex.Store({
  // 集中定义共享数据
  state: {
    name: '未登录游客'
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})