Beispielcode zum Vergleich verschiedener Syntaxformate von vue3

// Übergeordnete Komponente <template>
  <div>
    <div>
      <div>{{Stadt}}</div>
      <button @click="changeReactive">Reaktiv ändern</button>
      <button @click="handleFather">Klicken Sie auf die übergeordnete Komponente</button>
    </div>
    <Child ref="childRef" @handleBtn="handleBtn" @testClick="testClick" city="Chengdu" />
  </div>
</Vorlage>

<Skript>
importiere { ref, onMounted, toRefs, reaktiv } von 'vue'
Importiere Child aus „./Child.vue“.

Standard exportieren {
  Komponenten:
    Kind
  },
  aufstellen () {
    const handleBtn = (Wert) => {
      Konsole.log('btn', Wert)
    }

    const testClick = (val) => {
      console.log('Testklick', Wert)
    }

    const childRef = ref(null)

    const handleFather = () => {
      childRef.value.observed.a = 666 //Die übergeordnete Komponente ändert den Wert der untergeordneten Komponente console.log('Methode zum Abrufen der untergeordneten Komponente', childRef.value)
      // Die Unterkomponente muss „exposure“ definieren. Wenn nicht, muss sie zurückgegeben werden. Die entsprechende Funktion wird im Allgemeinen nicht direkt zurückgegeben. Wenn sie auf der Seite nicht verwendet wird, // exponieren Sie einfach die erforderliche Methode oder den erforderlichen Wert. }

    //Schreibe über die Setup-Funktionsmethode, muss die auf der Seite verwendete Methode und den Wert zurückgeben. //Wenn es sich um einen durch Reactve definierten Wert handelt, reagiert der durch Dekonstruktion auf der Seite gerenderte Wert nicht und muss über toRefs konvertiert und dann dekonstruiert werden. // …toRefs (testReactive)
    
    const testReactive = reaktiv({
      Stadt: 'Peking',
      Alter: 22
    })

    const changeReactive = () => {
      testReactive.city = "Chongqing"
    }

    zurückkehren {
      GriffBtn,
      testKlick,
      GriffVater,
      ...toRefs(testReactive),
      ÄnderungReaktiv,
      untergeordneteReferenz
    }
  }
}
</Skript>


//Unterkomponente <Vorlage>
  <div>
    {{beobachtet.a}}
    <button @click="handleBtn">Klick</button>
  </div>
</Vorlage>

<Skript>
importiere { defineProps, defineEmits, defineEmit, defineExpose, reaktiv } von 'vue'

Standard exportieren {
  Requisiten: {
    Stadt: Zeichenfolge
  },

  /* Dies wird hauptsächlich festgelegt, um zu verhindern, dass ctx.attrs auf dieses Attribut zugreift*/
  /* Einige in Props festgelegte Eigenschaften werden nicht in Attrs angezeigt*/

  emittiert: ['testClick'], //Der Zweck dieser Einstellung besteht darin, sicherzustellen, dass es keine entsprechende benutzerdefinierte Methode für Attrs gibt.
  //Wenn peops für eine Unterkomponente festgelegt ist, kann auf den entsprechenden Wert über attrs nicht zugegriffen werden. //arrts verfügt in vue3 über eine erweiterte Funktionalität mit benutzerdefinierten Methoden, Klassen und Stilen.
  //In vue2 wird die benutzerdefinierte Methode an $listeners angehängt. In vue3 wurde $listeners entfernt. setup (props, ctx) {
    const { aussetzen, emittieren } = ctx
    const handleBtn = () => {
      Konsole.log('btn', ctx)
      emittieren('Testklick', 666)
    }

    const beobachtet = reaktiv({
      ein: 1
    })

    Funktion clickChild (Wert) {
      beobachtet.a = Wert
    }

    exponieren({
      clickChild, // Benutzerdefinierte Methoden anzeigen, Aufrufe der übergeordneten Komponente beobachten// Den Wert der untergeordneten Komponente anzeigen})

    zurückkehren {
      beobachtet,
      GriffBtn
    }
  }
}
</Skript>

// Übergeordnete Komponente <template>
  <div>
    <button @click="handleFather">Klicken Sie auf den Vater</button>
    <Child ref="childRef" @handleBtn="handleBtn" @testClick="testClick" city="Chengdu" />
  </div>
</Vorlage>

<Skript-Setup>
importiere { ref } von 'vue'
Importiere Child aus „./Child.vue“.
// Diese Methode zum Schreiben von Methoden und Werten, die auf der Rückgabeexportseite nicht verwendet werden, muss verwendet werden, um die entsprechende Definition direkt in Vue zu dekonstruieren.
const childRef = ref(null)

const handleBtn = (Wert) => {
  Konsole.log('btn', Wert)
}

const testClick = (val) => {
  console.log('Testklick', Wert)
}

const handleFather = () => {
  console.log('Methode zum Abrufen von untergeordneten Komponenten', childRef.value)
  childRef.value.testFatherClick() //Die übergeordnete Komponente ruft die Methode der untergeordneten Komponente auf // Die untergeordnete Komponente stellt die entsprechende Methode über defineExpose bereit}

</Skript>


// Unterkomponente <template>
  <div>
    <button @click="handleBtn">Klick</button>
  </div>
</Vorlage>

<Skript-Setup>
importiere { defineProps, defineEmits, defineExpose, reaktiv } von 'vue'

const props = defineProps({
  Stadt: Zeichenfolge
})

const emit = defineEmits(['handleBtn', 'testClick'])

const handleBtn = () => {
  // console.log('btn', Requisiten, emittieren)
  emittieren('Testklick', 12)
}

const testFatherClick = () => {
  console.log('Testen, ob übergeordnete Komponente auf untergeordnete Komponente klickt')
}

const beobachtet = reaktiv({
  ein: 1
})

defineExpose({ //Expose-Methode für die übergeordnete Gruppe testFatherClick,
  beobachtet
})

</Skript>

<Stilbereich>
</Stil>

// Übergeordnete Komponente importiere { ref, reactive } von 'vue'
Importiere Child aus './Child.jsx'

const Vater = {
  aufstellen() {
    // Auf den in jsx definierten Verweis muss über .value zugegriffen werden, wenn er auf der Seite verwendet wird. const city = ref('北京')

    const changeCity = () => {
      Stadt.Wert = "Hangzhou"
    }

    const childRef = ref(null)

    const handelFather = (add) => {
      //Auch durch Verfügbarmachen der Expose-Methode in der Komponente // city.value = 'Hangzhou'
      Konsole.log('childRef', childRef.value)
    }

    const testChildClick = (Wert) => {
      console.log('Klick auf Unterkomponente testen', val)
    }

    zurückgeben () => {
      zurückkehren (
        <div>
          <div>{Stadt.Wert}</div>
          <button onClick={changeCity}>Stadt ändern</button>
          <button onClick={handelFather}>Klicken Sie auf das übergeordnete Element</button>
          <Untergeordnetes testChildClick={testChildClick} ref={childRef} />
        </div>
      )
    }
  }
}

Export Standard Vater


//Unterkomponente importiere { ref, reactive } von 'vue'

const Kind = {
  Requisiten: {
    testChildClick: Funktion
  },

  setup(props, { emittieren, freigeben }) {
    const { testChildClick } = Eigenschaften
    const testFatherClick = () => {
      console.log('Testen, ob übergeordnete Komponente auf untergeordnete Komponente klickt')
    }

    const handelBtn = () => {
      // emit('testChildClick') // Dies funktioniert nicht in jsx // console.log('props', props)
      testChildClick('Wert an übergeordnete Komponente zurückgeben')
      // Diese Methode ist die einzige Möglichkeit, eine Funktion an die untergeordnete Komponente zu übergeben, die den Wert über die Funktion an die übergeordnete Komponente übergibt.}

    exponieren({
      testVaterKlick
    })

    zurückgeben () => {
      zurückkehren (
        <div>
          <button onClick={handelBtn}>Die untergeordnete Komponente übergibt den Wert an die übergeordnete Komponente</button>
        </div>
      )
    }
  }
}

Standard-Untergeordnetes Element exportieren