Lassen Sie uns kurz über die Änderungen im Setup in vue3.0 sfc sprechen

<Skript>
Standard exportieren {
  Daten() {
    zurückkehren {
      Begrüßung: „Hallo Welt!“
    }
  }
}
</Skript>

<Vorlage>
  <p class="gruß">{{ gruß }}</p>
</Vorlage>

<Stil>
.Gruß {
  Farbe: rot;
  Schriftstärke: fett;
}
</Stil>

<script lang="ts">
  importiere { defineComponent } von 'vue'

    exportiere StandarddefiniereKomponente({
    aufstellen() {
      zurückkehren {
        // Eigenschaften, die der Vorlage zur Verfügung gestellt werden }
    }
  })
</Skript>

<Skript>
importiere { defineComponent, ref} von 'vue'

exportiere StandarddefiniereKomponente({
  aufstellen() {
    Konstante Anzahl = ref(0)
    zurückkehren {
      zählen
    }
  }
})
</Skript>

<Vorlage>
  <div>
    Elternteil{{count}}
  </div>
</Vorlage>

<script setup lang="ts">
importiere {ref} von 'vue'

  Konstante Anzahl = ref(0)
</Skript>

<Vorlage>
  <div>
    Elternteil{{count}}
  </div>
</Vorlage>

<script lang="ts">
importiere { defineComponent } von 'vue'
Kind aus „./childComponent“ importieren

exportiere StandarddefiniereKomponente({
  Komponenten:
    Kind
  },
  aufstellen() {
    // ...
  }
})
</Skript>

<Vorlage>
  <div>
    Elternteil
    <Kind />
  </div>
</Vorlage>

<script setup lang="ts">
Kind aus „./childComponent“ importieren
</Skript>

<Vorlage>
  <div>
    Elternteil
    <Kind />
  </div>
</Vorlage>

// übergeordnetes Element.vue
<Vorlage>
  <child :Anzahl={Anzahl} />
</Vorlage>
<script lang="ts">
importiere {defineComponent,ref} von 'vue'
Kind aus „./childComponent“ importieren

exportiere StandarddefiniereKomponente({
  Komponenten:
    Kind
  },
  aufstellen() {
    Konstante Anzahl = ref(0)
    zurückkehren {
      zählen
    }
  }
})
</Skript>

//Kind.vue
<Vorlage>
  Kind{{count}}
</Vorlage>
<script lang="ts">
importiere {defineComponent} aus 'vue'
exportiere StandarddefiniereKomponente({
  Requisiten: ['Anzahl'],
  setup(Requisiten) {
    zurückkehren {}
  }
})
</Skript>

// übergeordnetes Element.vue
<Vorlage>
  <child :Anzahl={Anzahl} />
</Vorlage>
<script setup lang="ts">
importiere {ref} von 'vue'
Kind aus „./childComponent“ importieren

  const count = ref<Zahl>(0)
</Skript>

//Kind.vue
<Vorlage>
  Kind{{count}}
</Vorlage>
<Skript-Setup>
defineProps(['Anzahl'])
</Skript>

<Skript-Setup>
defineProps({
  Anzahl: Zahl,
  Titel:
    Typ: Zeichenfolge,
    Standard: „Kopfzeile“
  },
  Daten: {
    Typ: Objekt,
    Standard() {
      zurückkehren {}
    }
  }
})
</Skript>

<script lang="ts" setup>
Schnittstelle d {
  Name: Zeichenfolge
  }

  defineProps<{
  Anzahl: Zahl // Zahl sollte durch ts-Syntax ersetzt werden Titel: Zeichenfolge
  Daten:d
}>()
</Skript>

<script lang="ts" setup>
Schnittstelle d {
  Name: Zeichenfolge
  }

  const {Anzahl = 0, Titel = 'Überschrift', Datum = {Name: 'a'}} = defineProps<{
  count: number // Die Zahl muss durch die ts-Syntax ersetzt werden title: string
  Daten:d
}>()
</Skript>

<script lang="ts">
// Vergessen Sie nicht, withDefaults zu importieren
importiere { withDefaults } von 'vue'

  Schnittstelle d {
  Name: Zeichenfolge
  }

  const props = mitDefaults(defineProps<{
  Anzahl: Zahl // Zahl sollte durch ts-Syntax ersetzt werden Titel: Zeichenfolge
  Daten:d
}>(), {
  Anzahl: 0,
  Titel: 'Kopfzeile',
  Daten: () => ({name: '王小二'})
})
</Skript>

<script setup lang="ts">
  // Ereignisse definieren und Typen kommentieren // Nicht-TS-Schreiben: const emits = defineEmits(['create'])
  const emits = defineEmits<{
    (e: 'erstellen', Wert: Zeichenfolge): void
  }>()

    // Ereignis auslösen const addTodo = () => {
    emittiert('erstellen', 'hallo')
 }
</Skript>