Was sind Vue-Komponenten? Wie erstelle und verwende ich Komponenten?

Was ist eine Komponente?
Komponenten sind kleine Module in Vue-Anwendungen, Codeblöcke, die wiederverwendet werden können. Komponenten erleichtern die Entwicklung großer Anwendungen, da Sie den Code in kleine Teile zerlegen können, von denen jeder für eine bestimmte Aufgabe verantwortlich ist, beispielsweise für den Bau von Legosteinen.

Komponenten erstellen
Es gibt zwei Möglichkeiten, Komponenten in Vue zu erstellen:

1. Registrieren Sie eine Komponente.
   Verwenden Sie die Methode Vue.component(), um eine globale Komponente zu registrieren:

Vue.component('my-component', {
    
      
  // 组件选项  
  // ...  
})

2. Registrieren Sie eine lokale Komponente
   , um eine lokale Komponente in einer Vue-Instanz zu registrieren:

new Vue({
    
      
  el: '#app',  
  components: {
    
      
    'my-component': MyComponent // 局部注册组件  
  }  
})

Komponenten verwenden
Komponenten in Vorlagen verwenden:

<template>  
  <div>  
    <my-component></my-component>  
  </div>  
</template>

Komponentenoptionen

1. Vorlagenoptionsvorlage
   : HTML-Vorlage der Komponente. Kann andere Komponenten und Anweisungen enthalten. Beachten Sie, dass die Vorlagenoption bei der globalen Registrierung nicht verwendet werden kann.

<template>  
  <div>  
    <p>{
   
   { msg }}</p> // 其他Vue选项或计算属性可以在组件的模板中使用。这里还能包含其他组件！  
  </div>  
</template>

2. Datenoption
   data: Das Datenobjekt der Komponente, das beliebige Daten enthalten kann. Beachten Sie, dass die Datenoption bei der globalen Registrierung nicht verwendet werden kann.

<script>  
export default {
    
      
  data() {
    
     // 使用函数定义异步获取数据！这在加载大型数据集合时特别有用！) 
}

3. Methodenoptionen
   : Methoden der Komponente, die in der Vorlage der Komponente aufgerufen werden können. Methodenoptionen können bei der globalen Registrierung nicht verwendet werden.

<script>  
export default {
    
      
  methods: {
    
      
    greet() {
    
      
      alert('Hello!')  
    }  
  }  
}  
</script>

4. Option „Berechnete Eigenschaft“
   berechnet: Die berechnete Eigenschaft der Komponente kann in der Vorlage der Komponente verwendet werden. Die berechnete Eigenschaftsoption kann bei der globalen Registrierung nicht verwendet werden.

<script>  
export default {
    
      
  data() {
    
      
    return {
    
      
      message: 'Hello'  
    }  
  },  
  computed: {
    
      
    reversedMessage() {
    
      
      return this.message.split('').reverse().join('')  
    }  
  }  
}  
</script>

5. Ereignisoptionen
   : Ereignisse, die die Komponente abhören und auslösen kann und die in der Vorlage der Komponente verwendet werden können. Ereignisoptionen können bei der globalen Registrierung nicht verwendet werden.

<script>  
export default {
    
      
  events: {
    
      
    click: 'greet' // 监听 click 事件，并在事件触发时调用 greet 方法。  
  },  
  methods: {
    
      
    greet() {
    
      
      alert('Hello!')  
    }  
  }  
}  
</script>

6. Stiloptionen
   Stile: Der Stil der Komponente, der in der Vorlage der Komponente verwendet werden kann. Stiloptionen können nicht verwendet werden, wenn sie global registriert sind. Stile können andere CSS-Module wie less oder sass enthalten. In den Stiloptionen können Sie das &-Symbol verwenden, um auf die Daten der Komponente zu verweisen. Beispiel: Farbe: &primaryColor;.

<script>  
export default {
    
      
  data() {
    
      
    return {
    
      
      primaryColor: 'blue'  
    }  
  },  
  styles: {
    
      
    color: '&primaryColor' // 使用&来引用组件的数据对象中的primaryColor属性。  
  }  
}  
</script>

7. Lebenszyklusoption
   Lebenszyklus: Die Lebenszyklus-Hook-Funktion der Komponente, die während der Erstellung, Aktualisierung, Zerstörung und anderen Phasen der Komponente aufgerufen werden kann. Bei der globalen Registrierung können keine Lebenszyklusoptionen verwendet werden. Im Folgenden sind einige allgemeine Lebenszyklus-Hook-Funktionen aufgeführt: erstellt(): wird aufgerufen, wenn die Komponente erstellt wird; mount(): wird aufgerufen, wenn die Komponente im DOM gemountet wird; aktualisiert(): wird aufgerufen, wenn die Komponente aktualisiert wird; zerstört(): Wird aufgerufen, wenn die Komponente zerstört wird. Beachten Sie, dass es sich bei diesen Hook-Funktionen um Funktionsoptionen und nicht um berechnete Eigenschaften- oder Methodenoptionen handelt. Nachfolgend finden Sie ein Beispiel:

<script>  
export default {
    
      
  created() {
    
     // 组件创建时调用。可以在这时初始化一些状态或执行一些操作。例如，初始化一个定时
  },
  mounted() {
    
     // 组件挂载到DOM上时调用。可以在这时执行一些与DOM操作相关的操作。例如，获取组件的DOM元素。   
    this.$refs.myElement // 获取组件的引用，例如：this.$refs.myElement.style.color = 'red';  
  },  
  updated() {
    
     // 组件更新时调用。可以在这时执行一些与数据更新相关的操作。例如，重新计算某个属性的值。   
    // ...  
  },  
  destroyed() {
    
     // 组件销毁时调用。可以在这时执行一些清理操作。例如，取消定时器或解绑事件监听器。   
    // ...  
  }  
</script>
}