Methods

Methods allow you to implement functions associated with the component instance which can then be used as event callbacks, data manipulation, and more.

Let's define a method in the Parent component that mutates the data in the following way:

<script>import Child from './Child.vue'; export default {  name: 'Parent',  components: {    Child,  },  data: () => ({    name: 'John Doe',  }),  methods: {    changeName: function(newName) {      this.name = newName;    }  },}</script>

In the preceding code, the changeName method is implemented as part of the component's methods. Currently, this method isn't really executed yet, but this changes next.

Like Vue template's expression context explained before, Vue takes care of setting this to the component instance; ...

Get Hands-On Full-Stack Web Development with ASP.NET Core now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.