VUE消息订阅(案例练习)

1.安装插件pubsub-js:npm install --save pubsub-js(在项目文件夹里面open in termimal)。
2.引入类库App.vue和Item.vue:import PubSub from 'pubsub-js'。(TODOLIST案例接续
3.补充:https://www.npmjs.com/package/pubsub-js。(这个是参考文档!)
4.父组件订阅,子组件发布。App.vue订阅,Item.vue发布消息。
App.vue的操作:引入组件;订阅子组件发布的内容delTodo,这个并不是delTodo方法,而是后面子组件定义发布的消息。

  //引入组件
  import PubSub from 'pubsub-js';
  mounted() {
       // 钩子函数里面订阅了子组件发布的消息‘delTodo’,并不是下面的函数。
        PubSub.subscribe('delTodo',(msg,token)=>{
            this.delTodo(token);//接受到子组件订阅的消息后,执行delTodo方法。
        })
  //这个是删除的方法!
  delTodo(index){
              this.todos.splice(index,1)
          }

Item.vue的操作:发布消息。

delItem(){
     if (window.confirm(`您确认删除${this.todo.title}`)){
          //发布了一个delTodo的消息。
          PubSub.publish('delTodo',this.index);
          }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值