Getting Started with VUE3 Development: Using Components

Vue is a popular JavaScript framework, especially in web application development. With the release of VUE3 version, VUE not only has the previous advantages, but also adds some new features, such as object-oriented programming and performance improvements. This article will introduce how to use components in VUE3 and how to use components to build a simple web page.

What is a VUE component?

VUE components are reusable code modules used to create user interfaces. Each component contains HTML, JavaScript and CSS code and can be used directly in code as a single entity.

Take a simple button component as an example. The following is its code:

<template>
  <button>{{ buttonText }}</button>
</template>

<script>
export default {
  name: 'MyButton',
  props: {
    buttonText: {
      type: String,
      required: true
    }
  }
}
</script>

<style>
button {
  background-color: blue;
  color: white;
  font-size: 16px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
}
</style>

This button component has a property buttonText, which is used to display the text on the button. When using the component, you need to pass this attribute. Here is a sample code that uses this component:

<template>
  <div>
    <MyButton buttonText="Click me!" />
  </div>
</template>

<script>
import MyButton from './MyButton.vue'

export default {
  components: {
    MyButton
  }
}
</script>

Here the component is introduced into Vue and then used in the template.

Create and use components

In order to create a new component, you need to use the Vue.component() method provided by Vue. This method receives two parameters: the component name and the object that defines the component. The following is the simplest component example:

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

<script>
export default {
  name: 'MyComponent',
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

In this code snippet, all other codes except the component name are defined in the object. Component variables are usually defined using idiomatic methods, such as using uppercase letters in the class name to distinguish the component from ordinary HTML markup.

Introduce this component into Vue:

<template>
  <MyComponent />
</template>

<script>
import MyComponent from './MyComponent.vue'

export default {
  components: {
    MyComponent
  }
}
</script>

You can use this component in the template at this time.

Using components in VUE3

VUE3 provides a better way to create and use components. In VUE3, use the createApp method to create a Vue application, and use the app.component() method to register components. The following is the sample code:

<template>
  <div>
    <MyComponent />
  </div>
</template>

<script>
import { createApp } from 'vue'
import MyComponent from './MyComponent.vue'

const app = createApp({})
app.component('MyComponent', MyComponent)
app.mount('#app')
</script>

In the above code, the createApp method is used to create a Vue application, and app.component() is used to register the component. The last line of code is used to mount the application into the HTML document.

Component passing parameters

As mentioned above, a common usage of components in VUE is to pass properties and events. For example, in the following code snippet:

<MyComponent :width="200" @clicked="onClick" />

width attribute will be passed to the component, the clicked event is triggered when the component is clicked, and onClick here is the event handler.

In order to use the passed properties and events in the component, you need to use the props and emit methods provided by VUE. For example:

<template>
  <div :style="{ width: width + 'px' }" @click="$emit('clicked')">
    {{ message }}
  </div>
</template>

<script>
export default {
  name: 'MyComponent',
  props: {
    width: {
      type: Number,
      default: 100
    }
  },
  data() {
    return {
      message: 'Hello, Vue!'
    }
  }
}
</script>

In components, properties are declared as part of the props object. By default, props are of any type. In this example, the width attribute is defined as a number type and assigned a default value of 100. In the template, width is passed and used to update the component's style.

Using events in components is very simple, just use the $emit method to call the event. In this example, the clicked event is called when the user clicks on the component.

Summary

Vue is a powerful JavaScript framework, and its component system is an important part of building reusable and scalable web applications. This article introduces how to use Vue to create and use components, use the createApp method in Vue3 to create a Vue application, and use the app.component() method to register components. Components can use props and emit methods to pass properties and events. I hope this article will be helpful to developers who want to learn VUE.

The above is the detailed content of Getting Started with VUE3 Development: Using Components. For more information, please follow other related articles on the PHP Chinese website!