So verwenden Sie benutzerdefinierte Komponenten mit Vue CLI-Front-End-Fragen und Antworten-php.cn

So verwenden Sie benutzerdefinierte Komponenten mit Vue CLI

PHPz

Freigeben： 2023-03-31 14:36:05

Original

1281 Leute haben es durchsucht

Unter dem Vue.js-Framework kann die Verwendung benutzerdefinierter Komponenten die Effizienz der Projektentwicklung erheblich verbessern. Vue CLI ist ein Gerüsttool zum schnellen Erstellen von Projekten auf Basis von Vue.js. Der schnelle Entwicklungsprozess von Vue CLI ermöglicht es Entwicklern, Projekte schneller zu erstellen. In diesem Artikel wird die Verwendung benutzerdefinierter Komponenten in Vue CLI vorgestellt.

1. Erstellen Sie ein Vue-Projekt

Geben Sie zunächst den folgenden Befehl in das Terminal ein, um ein Vue-Projekt zu erstellen:

vue create <project-name>

Nach dem Login kopieren

Darunter ist <project-name> der Projektname, Sie kann es anpassen. Befolgen Sie nach Eingabe des Befehls die Eingabeaufforderungen des Terminals, um eine Auswahl zu treffen, und warten Sie, bis das Projekt erstellt wird. <project-name>为项目名称，自定义即可。输入完该命令后，按照终端提示进行选择，等待项目创建完成。

二、创建自定义组件

在Vue CLI中，创建自定义组件需要在src/components文件夹下创建一个xxx.vue文件，其中xxx可以换成自定义的文件名，文件的内容通常如下所示：

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

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

<style>
</style>

Nach dem Login kopieren

其中，<template>标签用于指定组件的模板，<script>标签为组件的方法，<style>标签为组件的CSS样式。

在该文件中，我们定义了一个名为xxx的组件，其中包括两个属性：title和content。这两个属性在组件内部均为字符串类型，在使用组件的时候需要传入相应的参数。

三、使用自定义组件

在Vue CLI中，使用自定义组件需要进行以下步骤：

将自定义组件导入到所需的组件中

为了使用自定义组件，我们需要将其导入到我们需要使用的组件中。在这里以App.vue组件为例，我们可以打开该组件，将自定义组件导入到组件中：

<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>

Nach dem Login kopieren

在该组件中，我们将自定义组件导入到组件中，并且通过:title和:content的方式将数据传入到自定义组件中。

在组件中使用自定义组件

当我们导入自定义组件后，需要在Vue中注册所需的组件。在App.vue组件中以xxx

2. Erstellen Sie eine benutzerdefinierte Komponente

Um in Vue eine benutzerdefinierte Komponente zu erstellen, müssen Sie eine xxx.vue-Datei im Ordner src/components erstellen, in der xxx durch einen benutzerdefinierten Dateinamen ersetzt werden kann Die Datei sieht normalerweise wie folgt aus:

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

Nach dem Login kopieren

Darunter wird das Tag <template> verwendet, um die Vorlage der Komponente anzugeben, und das Tag <script> die Methode der Komponente und das Tag <style&gt ; ist der CSS-Stil der Komponente.

In dieser Datei definieren wir eine Komponente mit dem Namen xxx, die zwei Attribute enthält: title und content. Diese beiden Eigenschaften sind innerhalb der Komponente vom Typ String, und bei Verwendung der Komponente müssen entsprechende Parameter übergeben werden. 🎜🎜3. Benutzerdefinierte Komponenten verwenden🎜🎜In Vue CLI erfordert die Verwendung benutzerdefinierter Komponenten die folgenden Schritte: 🎜

Importieren Sie die benutzerdefinierte Komponente in die erforderliche Komponente

🎜Um a Um eine benutzerdefinierte Komponente zu erstellen, müssen wir sie in die Komponente importieren, die wir verwenden möchten. Nehmen wir hier die App.vue-Komponente als Beispiel: Wir können die Komponente öffnen und die benutzerdefinierte Komponente in die Komponente importieren: 🎜rrreee🎜In dieser Komponente importieren wir die benutzerdefinierte Komponente in die Komponente und übergeben :title und :content, um Daten an die benutzerdefinierte Komponente zu übergeben. 🎜

Benutzerdefinierte Komponenten in Komponenten verwenden

🎜Nachdem wir die benutzerdefinierte Komponente importiert haben, müssen wir die erforderlichen Komponenten in Vue registrieren. Nehmen Sie xxx als Beispiel in der App.vue-Komponente. Die Registrierungsmethode lautet wie folgt: 🎜rrreee🎜Auf diese Weise können wir unsere benutzerdefinierten Komponenten in der Komponente verwenden. 🎜🎜4. Zusammenfassung🎜🎜Durch die oben genannten Schritte können wir benutzerdefinierte Komponenten erfolgreich in Vue CLI verwenden. Der Vorteil benutzerdefinierter Komponenten besteht darin, dass sie wiederverwendet werden können, was die Verwaltung und Wartung erleichtert und auch die Effizienz der Projektentwicklung verbessern kann. Wenn Sie ein Vue-Projekt entwickeln, können Sie es auch mit benutzerdefinierten Komponenten versuchen. Ich glaube, das wird Ihnen viel helfen. 🎜

Das obige ist der detaillierte Inhalt vonSo verwenden Sie benutzerdefinierte Komponenten mit Vue CLI. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!