Vue 组件通信

Unsplash

• 父组件通过 props 给子组件传值

// App.vue 父组件
<List :list="list" />

data() {
  return {
    list: [
      {
        id: 'id-1',
        title: 'title-1'
      },
      {
        id: 'id-2',
        title: 'title-2'
      }
    ]
  }
}

// List.vue 子组件
<ul>
  <li v-for="item in list" :key="item.id">
    {{item.title}}
    <button>删除</button>
  </li>
</ul>

props: {
  // 用来接收父组件传给子组件的数据
  list: {
    type: Array,
    default() {
      return []
    }
  }
}

• 子组件通过 vm.$emit(event, arg) 触发父组件事件

// App.vue 父组件
<Input @add="addHandler"/>
<List :list="list" @delete="deleteHandler"/>

methods: {
  addHandler(title) {
    this.list.push({
      id: `id-${Date.now()}`,
      title
    })
  },
  deleteHandler(id) {
    this.list = this.list.filter(item => item.id !== id)
  }
}

// List.vue 子组件
<ul>
  <li v-for="item in list" :key="item.id">
    {{item.title}}
    <button @click="deleteItem(item.id)">删除</button>
  </li>
</ul>

methods: {
  deleteItem(id) {
    // 调用父组件的事件
    this.$emit('delete', id)
  }
}

// Input.vue 子组件
<input type="text" v-model="title"/>
<button @click="addTitle">添加</button>

methods: {
  addTitle() {
    // 调用父组件的事件
    this.$emit('add', this.title)
    this.title = ''
  }
}

• 其他组件通过 vm.$on( event, fn ) 进行通信，实例一个 Vue 实例 event 作为媒介，在要相互通信的组件中引入 event

// event.js
import Vue from 'vue'

export default new Vue()

// Input.vue
methods: {
  addTitle() {
    // 调用父组件的事件
    this.$emit('add', this.title)
    // 调用自定义事件
    event.$emit('onAddTitle', this.title)
    this.title = ''
  }
}

// List.vue
methods: {
  addTitleHandler(title) {
    console.log('on add title', title)
  }
},
mounted() {
  // 绑定自定义事件
  event.$on('onAddTitle', this.addTitleHandler)
},
beforeDestroy() {
  // 及时销毁，否则可能会造成内存泄漏
  event.$off('onAddTitle', this.addTitleHandler)
},

运行结果

该章节的内容到这里就全部结束了，源码我已经发到了 GitHub Vue-Communication 上了，有需要的同学可自行下载

End of File

---

行文过程中出现错误或不妥之处在所难免，希望大家能够给予指正，以免误导更多人，最后，如果你觉得我的文章写的还不错，希望能够点一下喜欢和关注，为了我能早日成为简书优秀作者献上一发助攻吧，谢谢！^ ^