vue-watch

vue-watch is a Vue component that fires events when specific properties of a child component change.

Installation

npm install --save vue-watch

Example

Include the component:

  import Vue from 'vue'
  import VueWatch from 'vue-watch'

  const TextComponent = Vue.component('text-component', {
    data() {
      return {
        text: '',
      }
    },
    template: '<textarea v-model="text" class="input2"></textarea>',
  } )

  export default {

    components: {
      VueWatch, TextComponent,
    },

    data() {
      return {
        theEvent: '',
      }
    },

    mounted() {
      const that = this
      this.$el.addEventListener( 'textChanged', function ( e ) {
        that.theEvent = e.detail
      } )
    },

Usage

<template>
  <div>
    <vue-watch :dispatch="{text: 'textChanged'}">
      <text-component />
    </vue-watch>
    <div class="info" v-html="theEvent"></div>
  </div>
</template>

License

MIT