Vue——PubSub.js - 个人学习记录

这个业务逻辑多少都有点奇怪了，阅读浏览次数增值在新闻详情页的控制器方法里setInc，这怎么还写进模型事件里了。如果非要用onAfterRead也可以，把新闻文章的内容单独分出来一个news_content表，然后把它和news做关联，然后给news_content表的onAfterRead事件做增值处理，这样点进新闻页内查询到文章内容时才会触发它。: 评 TP6模型事件-查询后onAfterRead不好用

文章标签更多

ThinkPHP (254)

Mysql (58)

DedeCms (33)

jQuery (67)

证件照 (1)

尺寸大小 (2)

背景颜色 (1)

setInc (4)

setDec (4)

onclick (5)

友情链接更多

超纯水设备

免费设计

海报设计

快递查询

pubsub-js

打开边栏(ESC) 关闭边栏(ESC)

1、组件间通信：消息的订阅与发布（PubSub.js）
使用PubSub可以在Vue任意组件间进行传值，无需要进行中间层层传递。

安装：npm install --save pubsub-js

或者 npm i pubsub-js

2、消息的发布。
首先是组件发布消息，发布另一个页面需要的data。
语法：PubSub.publish('msg', data)
实例：

<script>
import PubSub from 'pubsub-js' // 首先在此导入PubSub
export default {
  data () {
    return {
      curIndex: 0,
      strs: [
        {}, {}, {}
      ]
    }
  },
  methods: {
    taClick (index) {
      this.curIndex = index
      PubSub.publish('hhh', this.curIndex) // 发布消息 ，注意这里的'hhh'要和B组件接受消息的方法名一样
    }
  },
  mounted () {
  }
}
</script>

3、消息订阅
语法：PubSub.subscribe('msg', function(msg, data){})
实例：

<script>
import PubSub from 'pubsub-js'
export default {
  data () {
    return {
      newcurIndex: 0,
      subs: [
        {},
        {},
        {}
      ]
    }
  },
  methods: {
  },
  mounted () {
    this.pubId = PubSub.subscribe('hhh', (msg, data) => {
      this.newcurIndex = data
    })
  },
  beforeDestroy(){
  // 组件销毁的时候，解除订阅
    PubSub.unsubscribe(this.pubId)
  }
}
</script>

赏