Components in Vue.js: Erstellen, Wiederverwenden und Datenübergabe

Components sind ein entscheidendes Konzept in Vue.js, mit dem Sie strukturierte und wartbare Webanwendungen erstellen können. Mit components können Sie Ihre Anwendung in kleine, eigenständige Teile zerlegen, von denen jeder für einen bestimmten Teil der Benutzeroberfläche verantwortlich ist.

In diesem Artikel erfahren Sie, wie Sie components in Vue.js erstellen, sie zur Wiederverwendung von Code verwenden und Daten zwischen .js weitergeben components. Wir werden uns mit der Verwendung befassen props, um Daten von einer übergeordneten Komponente an eine untergeordnete Komponente zu übergeben, und mit Ereignissen, um Daten von einer untergeordneten Komponente zurück an ihre übergeordnete Komponente zu übergeben.

 

1. Erstellen Components

Components in Vue.js kann mit der Methode „Vue.component“ oder durch die Definition einer Einzeldatei erstellt werden components. 

 Beispiel: 

// Global Component using Vue.component  
Vue.component('my-component', {  
  // Component options  
});  
  
// Local Component using single-file component  
// MyComponent.vue  
<template>  
  <!-- Component template -->  
</template>  
  
<script>  
export default {  
  // Component options  
};  
</script>

 

2. Komponentenstruktur

Eine Vue-Komponente besteht aus einer Vorlage, einem Skript und optionalen Stilen. Die Vorlage enthält das HTML-Markup, das Skript enthält die Komponentenoptionen(Daten, Methoden, berechnete Eigenschaften, Lebenszyklus-Hooks) und Stile definieren das Erscheinungsbild der Komponente.

Beispiel:

<template>  
  <div>  
    <h1>{{ message }}</h1>  
    <button @click="increment">Increment</button>  
  </div>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      message: 'Hello, Vue!',  
      count: 0  
    };  
  },  
  methods: {  
    increment() {  
      this.count++;  
    }  
  }  
};  
</script>  
  
<style scoped>  
/* Component styles */  
</style>

 

3. Wiederverwendbarkeit von Komponenten

Components in Vue.js können in Ihrer gesamten Anwendung wiederverwendet werden, wodurch die Codeduplizierung reduziert und die Wartbarkeit verbessert wird. components Sie fördern einen modularen Ansatz, der es Ihnen ermöglicht, kleinere zu größeren zusammenzusetzen .

Beispiel:

// ParentComponent.vue  
<template>  
  <div>  
    <child-component></child-component>  
    <child-component></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  }  
};  
</script>

 

4. Props

Props ermöglichen die Weitergabe von Daten vom übergeordneten components zum untergeordneten Element components. Props werden in der untergeordneten Komponente deklariert und können wie reguläre Dateneigenschaften verwendet werden.

Beispiel:

// ParentComponent.vue  
<template>  
  <div>  
    <child-component:message="parentMessage"></child-component>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      parentMessage: 'Hello from parent!'  
    };  
  }  
};  
</script>  
  
// ChildComponent.vue  
<template>  
  <div>  
    <h2>{{ message }}</h2>  
  </div>  
</template>  
  
<script>  
export default {  
  props: ['message']  
};  
</script>

 

5. Benutzerdefinierte Ereignisse

Components können benutzerdefinierte Ereignisse ausgeben, um mit ihrem übergeordneten Element zu kommunizieren components. Eltern components können auf diese Ereignisse hören und entsprechend reagieren.

Beispiel:

// ChildComponent.vue  
<template>  
  <div>  
    <button @click="increment">Increment</button>  
  </div>  
</template>  
  
<script>  
export default {  
  methods: {  
    increment() {  
      this.$emit('increment-event');  
    }  
  }  
};  
</script>  
  
// ParentComponent.vue  
<template>  
  <div>  
    <child-component @increment-event="handleIncrement"></child-component>  
    <p>Count: {{ count }}</p>  
  </div>  
</template>  
  
<script>  
import ChildComponent from './ChildComponent.vue';  
  
export default {  
  components: {  
    ChildComponent  
  },  
  data() {  
    return {  
      count: 0  
    };  
  },  
  methods: {  
    handleIncrement() {  
      this.count++;  
    }  
  }  
};  
</script>

 

Diese Beispiele veranschaulichen die Schlüsselkonzepte von Vue.js components und demonstrieren deren Flexibilität, Wiederverwendbarkeit und Kommunikationsfähigkeiten. Components Helfen Sie dabei, modularen und wartbaren Code zu erstellen, was Vue.js zu einem leistungsstarken Framework für die Erstellung skalierbarer Anwendungen macht.