props vs emit in vue.js

<template>
<div>
<input type="text" v-model="firstName"/>
<input type="text" v-model="lastName"/>
<br/>
<button @click='onButtonClick()'>
Click Me
</button>
</div>
</template>
<script>
export default {

props: ['firstName', 'lastName'],

emits: ['onClick'],

methods :{
onButtonClick($event){
this.$emit("onClick", { fName: this.firstName, lName:this.lastName});
}
},

}
</script>
<script>
import MyComp from './MyComponent.vue' //import the component
export default {

components: {
'my-comp' : MyCompl //define the component
},

data() {
return {
firstName: 'Binod',
lastName: 'Mahto',
fullName:'',
}
},

methods : {
mtdCalculateFullName(payload) {
this.$data.firstName = payload.fName;
this.$data.lastName = payload.lName;
this.$data.fullName = this.$data.firstName + ' ' + this.$data.lastName;
}
},
}
</script>
<template>
<div>
<my-comp :first-Name='firstName' :last-Name='lastName' @on-Click='mtdCalculateFullName'></my-comp>
</div>
<div>
<p>Full Name:</p><p>{{fullName}}</p>
</div>
</template>

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Binod Mahto

Binod Mahto

141 Followers

Solution Architect & Full Stack Developer. Passionate about Software designing & development and Learning Technologies and Love to share what I learn.