Vue

by tlgreg

HTML

<script src="https://unpkg.com/@vue/[email protected]/dist/vue-composition-api.umd.js"></script>
<div id="app">
  <div>
    <baseinput label="test" @blur="blur"></baseinput>
    <br>
    <classic-base-input label="classic" @blur="blur"></classic-base-input>
  </div>
</div>

TypeScript

Vue.use(window.vueCompositionApi.default);

const baseinput = vueCompositionApi.createComponent({
  props: ['label', 'value'],
  setup(props, context) {
    const inputListeners = vueCompositionApi.computed(() => {
       // `Object.assign` merges objects together to form a new object
      return Object.assign({},
        // We add all the listeners from the parent
        context.root.$listeners,
        // Then we can add custom listeners or override the
        // behavior of some listeners.
        {
          // This ensures that the component works with v-model
          input: function (event) {
            context.emit('input', event.target.value)
          },
        },
      )
    });
    return {
    	inputListeners,    
    };
  },
  template: `
    <label>
      {{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
    </label>
  `
});

const classicBaseInput = {
	props: ['label', 'value'],
  template: `
  	<label>
    	{{ label }}
      <input
        v-bind="$attrs"
        v-bind:value="value"
        v-on="inputListeners"
      >
		</label>
  `,
  computed: {
  	inputListeners() {
    	console.log(this.$listeners);
    	const vm = this
      return Object.assign({},
      	this.$listeners,
        {
        	input(event) {
          	vm.$emit('input', event.target.value)
          },
        },
      )
    },
  },
}

new Vue({
  el: "#app",
  components: {baseinput, classicBaseInput},
  methods: {
  	blur: () => {
  		console.log("blur event works");
  	},
  },
});