[Vuejs]-Vue.js component parent event

by

2👍

✅

Your <text-input> component needs to forward (re-emit) the blur event from the inner <input> element:

// text-input
template: `<input @blur="$emit('blur')">`

Then, <text-input>‘s parent could receive it:

// parent of text-input
<text-input @blur="leave" />

Vue.component('text-input', {
        props:['args'],
        template: `<input :id="args.id" :type="args.type" @blur="$emit('blur', $event)"/>`
})

new Vue({
  el: '#app',
  data() {
    return {
      inputs: [
        {id: 1},
        {id: 2},
      ] 
    }
  },
  methods: {
    leave(e) {
      console.log('leave', e.target.id)
    }
  }
})
<script src="https://unpkg.com/vue@2.5.16"></script>

<div id="app">
  <div class="form-group">
    <text-input 
      class="form-control"
      v-for="input in inputs"
      v-bind:args="input"
      v-bind:key="input.id"
      v-model="input.id"
      v-on:blur="leave"
      />
  </div>
</div>
👤tony19

Leave a comment