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

阳光穿透心脏的1/2处 2021-08-31 00:18 422阅读 0赞

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

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

![20200614211222329.png][]

看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 lang="less" >
    @color:red;
    .red{
      background-color: @color;
    }
    </style>

list.vue

<template>
      <div class="inptutcontent">
        <ul>
          <li v-for="item in list" :key="item.id">
            {
       {item.name}}
            <button @click="deleteItem(item.id)">删除</button>
          </li>
        </ul>
      </div>
    </template>
    <script>
    import event from "./event";
    export default {
      name: "list",
      props: {
        list: {
          type: Array,
          default() {
            return [];
          }
        }
      },
      data() {
        return {};
      },
      mounted(title){
          //绑定自定义事件
       event.$on('ontitle',this.onEvent)
      },
      methods: {
        deleteItem(id) {
          this.$emit("deteItem", id);
        },
        onEvent(title){
            console.log(`自定义事件${title}`)
        }
       
      },
      beforeDestroy(){
         //及时销毁自定义事件 防止内存泄露
         this.$off('ontitle',this.onEvent)
      }
    
    };
    </script>
    <style lang="less">
    @color: red;
    .body {
      background: @color;
    }
    </style>

index.vue

<template>
      <div class="content">
          自定义事件
        <input-com @add='handleadd'></input-com>
        <list-com :list="list" @deteItem="handledelete"></list-com>
      </div>
    </template>
    <script>
    import InputCom from "./Input";
    import listCom from "./list";
    export default {
      name: "index",
      data() {
        return {
          list: [
            {
              id: "id-1",
              name: "苹果"
            },
            {
              id: "id-2",
              name: "香蕉"
            }
          ]
        };
      },
      methods:{
          handleadd(title){
                this.list.push({id:`id-${Date.now()}`,name:title})
            },
             handledelete(id){
              this.list=this.list.filter((item)=>{return item.id!==id})
              // this.list = this.list.filter(item => item.id !== id)
            }
      },
      components: {
        "input-com": InputCom,
        "list-com": listCom
      }
    };
    </script>
    <style lang="less" scoped>
    </style>

添加的时候结果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbnhpbl96aHU_size_16_color_FFFFFF_t_70][]

实现了通信。。。

[20200614211222329.png]: /images/20210730/d220ed8c0bb8443ab2077a8e25e5d16e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpbnhpbl96aHU_size_16_color_FFFFFF_t_70]: /images/20210730/e53b486b70c246fba49fda54cd83a402.png