How to use custom components with Vue CLI

Under the Vue.js framework, using custom components can greatly improve the development efficiency of the project. Vue CLI is a scaffolding tool for quickly building projects based on Vue.js. Vue CLI's rapid development process allows developers to build projects more quickly. This article will introduce how to use custom components in Vue CLI.

1. Create a Vue project

First, enter the following command in the terminal to create a Vue project:

vue create <project-name>

Among them, <project-name> is the project name, you can customize it. After entering the command, follow the terminal prompts to make selections and wait for the project to be created.

2. Create a custom component

In the Vue CLI, to create a custom component you need to create a xxx.vue file in the src/components folder, where xxx can be replaced with a custom one The file name and the content of the file usually look like the following:

<template>
  <div>
    <h1>{{ title }}</h1>
    <p>{{ content }}</p>
  </div>
</template>

<script>
export default {
  name: 'xxx',
  props: {
    title: String,
    content: String,
  },
};
</script>

<style>
</style>

Among them, the <template> tag is used to specify the template of the component, and the <script> tag is The method of the component, the <style> tag is the CSS style of the component.

In this file, we define a component named xxx, which includes two properties: title and content. These two properties are of string type inside the component, and corresponding parameters need to be passed in when using the component.

3. Using custom components

In Vue CLI, using custom components requires the following steps:

1. Import the custom component into the required In the component

In order to use a custom component, we need to import it into the component we need to use. Taking the App.vue component as an example here, we can open the component and import the custom component into the component:

<template>
  <div>
    <xxx :title="pageTitle" :content="pageContent"></xxx>
  </div>
</template>

<script>
import xxx from '@/components/xxx.vue';  // 将组件导入

export default {
  name: 'App',
  components: {
    xxx,  // 注册组件
  },
  data() {
    return {
      pageTitle: '自定义组件页面',
      pageContent: '欢迎使用自定义组件',
    };
  },
};
</script>

<style>
</style>

In this component, we import the custom component into the component and pass # Pass data into the custom component using ##:title and :content.

Using custom components in components

When we import custom components, we need to register the required components in Vue. Taking

xxx as an example in the App.vue component, the registration method is as follows:

export default {
  name: 'App',
  components: {
    xxx,  // 注册组件
  },
  data() {
    return {
      pageTitle: '自定义组件页面',
      pageContent: '欢迎使用自定义组件',
    };
  },
};

In this way, we can use our customized components in the component.

4. Summary

Through the above steps, we can successfully use custom components in Vue CLI. The advantage of custom components is that they can be reused, convenient for management and maintenance, and can also improve project development efficiency. If you are developing a Vue project, you might as well try using custom components. I believe it will bring you a lot of help.

The above is the detailed content of How to use custom components with Vue CLI. For more information, please follow other related articles on the PHP Chinese website!