vue总结「二」--组件间的通讯

1. 父子组件通讯:props 和 $emit

父组件 index.vue

  • 给子组件 Input 传递事件 addHandler
  • 给子组件 List 传递数据list、事件 deleteHandler



子组件 Input.vue

  • 通过$emit调用父组件的 add事件 并传值



子组件 List.vue

  • 通过props获取到父组件传的数据listFather
  • 通过$emit调用父组件的 delete事件 并传值



2. 组件间通讯:自定义事件

实现组件input 和 组件 List之间的通讯

① 新建文件event.js 实例一个vue对象
② 两个组件分别引入该实例
③ 通过绑定自定义事件,调用自定义事件实现组件间的通讯

组件List.vue

  • 绑定自定义事件onAddTit
  • 在deforeDestroy钩子中销毁 自定义事件onAddTit,防止造成内存泄露



组件 Input.vue

  • 调用在List组件中绑定的自定义事件 onAddTit



你可能感兴趣的:(vue总结「二」--组件间的通讯)