5组件间通信方法

组件间通信

1. props:在主组件中写的事件需要传到子组件时需要：

主组件APP.vue中传递一个addTodos方法时：

<Header :addTodos="addTodos"/>

在Header.vue中接收addTodos

props:{
    addTodos:Function
}

2. 自定义事件
$on(‘事件名’,回调函数)

$emit(‘事件名’,数据)

第一种：
1. App.vue

<Header @addTodos="addTodos">

2. Header.vue中methods触发自定义事件

this.$emit('addTodos',todo)

第二种：
1. App.vue中

mounted(){ //执行异步代码
   this.$refs.head.$on('addTodos',this.addTodos)
 },

2. Header.vue中methods触发自定义事件

this.$emit('addTodos',todo)


3. 消息订阅与发布（PubSub）

在App.vue中：
- 在终端安装PubSub

npm install –save pubsub-js

• 可以用：npm info pubsub-js查看是否下载成
• 删除Main里面deleteTodo传递函数，紧接着把其他组件的也删除掉
• 引入pubsub-js
  

  import PunSub from ‘pubsub-js’

• 在mounted中进行异步挂载

  mounted(){ //执行异步代码
  //给<Header/>绑定addTodos事件监听
  //this.$on('addTodos',this.addTodos)  //给App绑定的监听，不应该这样写，应该时给header绑定监听
  this.$refs.head.$on('addTodos',this.addTodos)
  
  //订阅消息  用PubSub:优越性为无任何位置限制，可以父子组件，兄弟组件，子孙组件之间通信都可以,回调函数一般要写成箭头函数
  PunSub.subscribe('deleteTodo',(mag,index)=>{
    this.deleteTodo(index)
  })
  },

  • Item.vue中进行发布（因为是在Item中进行删除的操作）
    

    • 引入pubsub-js
      

    import PubSub from ‘pubsub-js’

• 使用订阅和发布进行通信

  PubSub.publish(‘deleteTodo’,index)

4. slot

// 用于父组件向子组件传递标签数据（组件用多次时好用）

<slot name="XXX"></slot>    //在子组件中写
<div slot="XXX"></div>  //在父组件中写

注意：函数方法和计算属性要放在父组件中使用