[Vue-rx] Access Events from Vue.js Templates as RxJS Streams with domStreams

weixin_30873847

于 2018-07-17 19:57:00 发布

阅读量62

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/Answer1215/p/9325554.html

本文介绍如何在Vue.js项目中使用domStreams组件属性来处理DOM事件。通过将事件流映射到Vue模板中，可以实现在订阅函数内部对事件进行处理，并将处理后的值再反馈到模板中。

The domStreams component property enables you to access Events from your Vue.js templates as Streams insides your subscriptions function. You can then map the Events to other values and stream them back into your Vue.js templates.

<template>
  <section class="section">
    <button class="button" v-stream:click="click$">Click</button>
    <h1 class="title">{{random$}}</h1>
  </section>
</template>

<script>
import { Observable } from "rxjs"

export default {
  domStreams: ["click$"],
  subscriptions() {
    const random$ = this.click$.map(() =>
      Math.random()
    )

    return {
      random$
    }
  }
}
</script>