VUE2-Schnellstart (4) --- Grundlegende Verwendung von Komponenten

Global Outbreak Map (Klicken, um die China-Karte aufzurufen) Klicken Sie auf Github- Adresse hochladen ,
da bei Übersetzungsproblemen in einigen Ländern die Daten nicht gerendert werden konnten. Die Namen der einzelnen Länder können manuell übersetzt werden.
Implementieren Sie die Online-Adresse für die Artikeleingabe
: Klicken Sie hier, um sie einzugeben

Komponente

Definieren Sie selbst ein Vorlagenelement

Komponente deklarieren

In HTML

app.component ()

Diese Methode ist die globale Registrierung

<div id="app">
			<button-my></button-my>	
</div>
const app = Vue.createApp({})
			
			app.component('button-my',{
				data(){
					return {
						count: 0
					}
				},
				template:`<button @click="count++">点击增加count</button>
				<div>count = {
   
   { count }} </div>`
			})
			
			app.mount('#app')

Im VUE-Projekt

Wenn im vue-Projekt

Erklärung

<template>
  <div>
      <button @click="count++">点击增加count</button>
      <div>count = {
   
   { count }}</div>
  </div>
</template>

<script>
export default {
     
     
  name: "button-my",
  data() {
     
     
    return {
     
     
      count: 0
    };
  }
};
</script>

<style scoped></style>

verwenden

<template>
    <div>
        <button-my></button-my>
    </div>
</template>

<script>
    import ButtonMy from "../components/button-my";
    export default {
     
     
        name: "Tests",
        components: {
     
     ButtonMy}
    }
</script>

<style scoped>

</style>

Prop Wertübertragung

Ändern Sie die Komponenten gerade jetzt

<template>
  <div>
    <h2>{
   
   { title }}</h2>
    <button @click="count++">点击增加count</button>
    <div>count = {
   
   { count }}</div>
  </div>
</template>

<script>
export default {
     
     
  name: "button-my",
  data() {
     
     
    return {
     
     
      count: 0
    };
  },
  // eslint-disable-next-line vue/no-dupe-keys
  props: ["title"]
};
</script>

Übergeben Sie den Wert dort, wo er verwendet wird

 <button-my title="I,dog"></button-my>

Hören Sie sich Komponentenereignisse an

Die
untergeordnete Komponente schreibt die Ausgabe in die Funktion changeText (), die von den changeTexts der übergeordneten Komponente ausgelöst wird. Weitere
Informationen finden Sie in der übergeordneten Komponente unten.

<template>
  <div>
    <h2>{
   
   { title }}</h2>
    <button @click="count++">点击增加count</button>
    <div>count = {
   
   { count }}</div>
      <button @click="changeText">改变标题</button>
  </div>
</template>

<script>
export default {
     
     
  name: "button-my",
  data() {
     
     
    return {
     
     
      count: 0
    };
  },
  methods: {
     
     
    changeText() {
     
     
      this.$emit("changeTexts");
    }
  },
  // eslint-disable-next-line vue/no-dupe-keys
  props: ["title"]
};
</script>

<style scoped></style>

Übergeordnete Komponente

<template>
  <div>
    <button-my :title="text" @changeTexts="(text='我是狗')"></button-my>
  </div>
</template>

<script>
import ButtonMy from "../components/button-my";
export default {
     
     
  name: "Tests",
  components: {
     
      ButtonMy },
    data(){
     
     
      return{
     
     
          text:"I,dog"
      }
    }
};
</script>

<style scoped></style>

zu verwendende Szenen

Slots und dynamische Vorlagen

Eine Komponente wird mehrmals verwendet. Beispielsweise verwenden
die Popup-Fenster aller Seiten diese Komponente, der Inhalt des Popup-Fensters wird jedoch dynamisch geändert. Weitere
Informationen finden Sie unter Verwendung des nächsten Slots.

Zweite Hälfte

Steckplatznutzung

  Hallo allerseits, ich bin ein Code Husky, ein Student der Netzwerktechnik am Software College, weil ich ein "Hund" bin und über Tausende von Kilometern Fleisch essen kann. Ich möchte das, was ich während der Universität gelernt habe, mit allen teilen und Fortschritte machen. Aufgrund des begrenzten Niveaus wird es jedoch unvermeidlich einige Fehler im Blog geben. Wenn es irgendwelche Auslassungen gibt, lass es mich bitte wissen! Derzeit nur auf der csdn-Plattform aktualisieren, die Blog-Homepage: https://blog.csdn.net/qq_42027681 .

未经本人允许，禁止转载

Wird später gestartet

Front-End: Vue-Eintrag Vue-Entwicklungs-Applet usw.
Back-End: Java-Eintrag Springboot-Eintrag usw.
Server: MySQL-Eintragsserver Einfache Anweisungen Cloud-Server zum Ausführen des Projektpythons
: Es wird empfohlen, sich nicht aufzuwärmen. Achten Sie auf
die Verwendung einiger Plug-Ins usw.

Der Weg der Universität ist auch in sich selbst,
lerne hart, Jugend mit Leidenschaft. Wenn du an Programmierung interessiert bist, kannst du dich unserer qq-Gruppe anschließen, um miteinander zu kommunizieren: 974178910

Wenn Sie Fragen haben, können Sie unten eine Nachricht hinterlassen. Ich werde antworten, wenn Sie sie sehen