vue.js child emit event code example

Example 1: how to access both child event param and parent param in vue

<template>
    <ul>
        <product v-for="product in products"
                 :product="product"
                 @add="addToChart" />
    </ul>
</template>

<script>
const Product = {
    props: ["product"],
    render(h) {
        return h("li", { on: { click: this.click } }, this.product);
    },
    methods: {
        click() {
            this.$emit("add", { product: this.product, quantity: 42 });
        }
    }
};

export default {
    data() {
        return {
            products: ["Foo", "Bar"]
        };
    },
    components: {
        Product
    },
    methods: {
        addToChart({ product, quantity }) {
            console.log(product, quantity);
        }
    }
}
</script>

Example 2: vue pass data from child to parent

<script>
// @ is an alias to /src (in a vue-cli generated project)
import Child from '@/components/Child.vue'

// You also need to declare that the imported child component will be used:
export default {
  components: {
    Child
  }
}
</script>

/****************************************************************/

<template>
  <div>
    <!-- simplest prop - pass a string -->
    <Child title="This is my title"></Child>

    <!-- Pass an object, defined inline -->
    <Child :parentData="{msg: 'xxx'}"></Child>

    <!-- Pass an object, defined in the `data()` method -->
    <Child :parentData="myData"></Child>

    <!-- Pass a string variable, defined in `data()`. Note colon. -->
    <Child :stringProp="stringMessage"></Child>
  </div>
</template>

/****************************************************************/


<script>
export default {
  name: 'Child',
  // To use props, they must be declared
  props: {
    parentData: Object,
    stringProp: String,
    title: String
  }
}
</script>

/****************************************************************/


<!-- Parent.vue -->
<template>
  <div>
    <!--
    Listen for `childToParent`: the first parameter of the `$emit` method
    in the child component. We're also listening and reacting to an
    `increment` event - in this case, we increment a counter inline.
    -->
    <Child :parentData="myData" v-on:childToParent="onChildClick" v-on:increment="counter++"></PassProps>
  </div>
</template>
<script>
import Child from '@/components/Child.vue'
export default {
  data () {
    return {
      counter: 0,
      fromChild: '', // This value is set to the value emitted by the child
    }
  },
  name: 'about',
  components: {
    Child
  },
  methods: {
    // Triggered when `childToParent` event is emitted by the child.
    onChildClick (value) {
      this.fromChild = value
    }
  }
}
</script>


/****************************************************************/


<!-- Child.vue -->
<template>
  <div class="child">
    <!-- Simplest - call `$emit()` inline-->
    <button type="button" name="button" v-on:click="$emit('increment')">Click me to increment!</button>

    <!-- set a variable then trigger a method which calls `$emit()` -->
    <label for="child-input">Child input: </label>
    <input id="child-input" type="text" name="msg" v-model="childMessage" v-on:keyup="emitToParent">
  </div>
</template>
<script>
export default {
  data() {
    return {
      childMessage: ''
    }
  },
  name: 'Child',
  methods: {
    // Define the method that emits data to the parent as the first parameter to `$emit()`.
    // This is referenced in the <template> call in the parent. The second parameter is the payload.
    emitToParent (event) {
      this.$emit('childToParent', this.childMessage)
    }
  }
}
</script>