Rumah  >  Artikel  >  hujung hadapan web  >  Apakah perbezaan antara

3. Daftar komponen

fungsi persediaan

<script>
import Hello from &#39;@/components/HelloWorld&#39;
export default {
  components: {
    Hello
  }
}
</script>

＜penetapan skrip>gula sintaks

<script setup>
import Hello from &#39;@/components/HelloWorld&#39;
</script>

Tidak perlu mendaftar dalam komponen, anda boleh menggunakannya terus .

4. Gunakan arahan tersuai

fungsi persediaan

<template>
    <h2 v-onceClick>使用了setup函数</h2>
</template>
<script>
export default {
  directives: {
    onceClick: {
      mounted (el, binding, vnode) {
        console.log(el)
      }
    }
  },
}
</script>

＜persediaan skrip> Gula sintaktik

<template>
    <h2 v-my-Directive>使用了script setup</h2>
</template>
<script setup>
const vMyDirective = {
  beforeMount: (el) => {
    console.log(el)
  }
}
</script>

Arahan tersuai yang didaftarkan secara global akan berfungsi seperti biasa. Arahan tersuai tempatan tidak perlu didaftarkan secara eksplisit dalam <script setup></script>, tetapi ia mesti mengikut konvensyen penamaan vNameOfDirective

5 komunikasi data ibu bapa kepada anak

<Com :num="100"></Com>

fungsi persediaan

<script>
export default {
  props: {
    num: {
      type: Number,
      default: 1
    }
  },
  setup (props) {
    console.log(props)
  }
}
</script>

＜persediaan skrip＞gula sintaksis

<script setup>
import { defineProps } from &#39;vue&#39;
const props = defineProps({
  num: {
    type: Number,
    default: 1
  }
})
</script>

6 Komunikasi data daripada anak kepada ibu bapa

fungsi persediaan

<script>
export default {
  setup (props, context) {
    const sendNum = () => {
      context.emit(&#39;sendNum&#39;, 200)
    }
    return { sendNum }
  }
}
</script>

＜gula persediaan skrip＞Syntax 🎜>

<script setup>
import { defineProps, defineEmits } from &#39;vue&#39;
const emit = defineEmits([&#39;submit&#39;])
const sendNum = () => {
  emit(&#39;submit&#39;, 1000)
}
</script>

defineProps dan defineEmits ialah makro pengkompil yang hanya boleh digunakan dalam . Ia tidak perlu diimport kerana ia akan disusun semasa proses

defineProps menerima nilai yang sama seperti pilihan props dan defineEmits menerima nilai yang sama seperti pilihan yang dipancarkan.

defineProps dan defineEmits akan memberikan potongan jenis yang sesuai selepas pilihan diluluskan.

Pilihan yang diluluskan untuk defineProps dan defineEmits dinaikkan pangkat daripada persediaan kepada skop modul. Oleh itu, pembolehubah tempatan yang diisytiharkan dalam skop persediaan tidak boleh dirujuk oleh pilihan yang diluluskan. Melakukannya akan menyebabkan ralat penyusunan. Walau bagaimanapun, ia boleh merujuk pengikatan yang diimport kerana ia juga dalam skop modul.

7. defineExpose and expose

Dedahan komponen yang ditakrifkan menggunakan

fungsi persediaan didayakan secara lalai, dan semua pembolehubah contoh dan kaedah yang ditakrifkan dalam fungsi akan menjadi terdedah. Komponen yang menggunakan