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

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue2.0 歌手列表滚动及右侧快速入口实现

    本次的系列博文的知识点讲解和代码,主要是来自于 黄轶 在慕课网的 Vue 2.0 高级实战-开发移动端音乐WebApp 课程,由个人总结并编写,其代码及知识点...

    Nian糕
  • JavaScript this的指向

    在 JavaScript 中 this 取什么值,是在函数真正被调用执行的时候确定的,函数定义的时候确定不了,因为 this 的取值是执行上下文环境的一部分,每...

    Nian糕
  • ECMAScript6 解构赋值

    在 ES6 中,关于解构的含义为:允许按照一定模式,从数组和对象中提取值,对变量进行赋值,而数组、对象和字符串,都能通过这种方式进行赋值

    Nian糕
  • vue中eventBus的使用

    tianyawhl
  • Reactjs+BootStrap开发自制编程语言Monkey的编译器:词法解析1

    望月从良
  • React 开发者常犯的 3 个错误

    关于前端开发,我最开心的事情就是总有新的东西可以学习。但我们可能一辈子都在与各种编程语言、库和框架大交道,却仍然对它们一无所知。

    疯狂的技术宅
  • springboot打包部署的那些事

    springboot-maven-plugin打包的第一级目录为Boot-INF,如果不做任何配置,直接mvn clean package会发现无法把本地的ja...

    lyb-geek
  • 根据id查询所有子节点/父节点,mysql 以及ssm前后台处理流程

    注意:自己的数据表表名称,切记手动修改,字段名称(特别注意id,parent_id字段名称,不然肯定查询不出来的)。

    别先生
  • MySQL 8.0.21中UNDO截断的改进

    UNDO表空间可以在MySQL 8.0中隐式或显式截断。两种方法使用相同的机制。当UNDO表空间截断完成时,可能导致非常繁忙的系统上的定期停顿。此问题已在MyS...

    MySQLSE
  • 来玩Play框架02 响应

    我上一章总结了Play框架的基本使用。这一章里,我将修改和增加响应。 HTTP协议是按照“请求-响应”的方式工作。Play框架的核心是用动作(Action)来完...

    Vamei

扫码关注云+社区

领取腾讯云代金券