vue.jsHow can I use the Vue.js Composition API to create a component?

The Vue.js Composition API allows developers to create components in a more flexible and powerful way. To create a component, you will need to create a setup() function and return an object containing the component's data and methods.

For example, the following code creates a component with a message data property and a greet() method:

<template>
  <div>{{ message }}</div>
</template>

<script>
  import { ref } from 'vue'

  export default {
    setup() {
      const message = ref('Hello!')

      function greet() {
        message.value = 'Hi there!'
      }

      return {
        message,
        greet
      }
    }
  }
</script>

This component will display the message "Hello!" when rendered, and when the greet() method is called, the message will change to "Hi there!".

Code explanation

1. import { ref } from 'vue': This imports the ref() function from the Vue library.
2. const message = ref('Hello!'): This creates a reactive data property called message, with an initial value of "Hello!".
3. function greet() { ... }: This creates a method called greet(), which changes the value of message to "Hi there!".
4. return { message, greet }: This returns an object containing the message data property and the greet() method.

For more information about the Vue.js Composition API, see the following links:

• Vue.js Composition API Overview
• Vue.js Composition API Guide

Edit this code on GitHub