vue 自定义事件兄弟组件间通信

最新推荐文章于 2024-08-09 18:48:50 发布

xinxin_zhu

最新推荐文章于 2024-08-09 18:48:50 发布

阅读量784

点赞数

分类专栏： vue 组件通信文章标签： vue.js

本文链接：https://blog.csdn.net/xinxin_zhu/article/details/106751832

版权

本文介绍如何在Vue.js项目中利用自定义事件实现兄弟组件间的通信。通过一个具体的项目结构示例，包括event.js、Input.vue、list.vue和index.vue，详细阐述了添加操作过程中事件的触发和接收，成功展示了Vue组件间通信的实现过程。

摘要由CSDN通过智能技术生成

首先 vue 实例有event对象可以实现自定义事件，实现兄弟组件间通信。

项目结构：event.js 导出vue实例对象 Input.vue 和 list.vue 是兄弟组件，index.vue 引入两个子组件，实现 Input 和list 间通信

看event.js

import vue from 'Vue'
export default new vue()

Input.vue

<template>
  <div class="inputcontetn">
    <input type="text" v-model="title" />
    <button @click="add" class='red'>添加</button>
  </div>
</template>
<script>
import event from "./event";
export default {
  name: "input",
  data() {
    return {
      title: ""
    };
  },
  methods: {
    add() {
      this.$emit("add", this.title);
      event.$emit('ontitle', this.title)
    }
  }
};
</script>
<style