Bileşen Etkinlikleri

Bileşen Etkinlikleri

Bu sayfanın, Bileşenler Temel Bilgileri bölümünü okuduğunuzu varsayıyor. Bileşenlerle yeniyseniz, önce onu okuyun.

Olay Yayma ve Dinleme

Bir bileşen, gömülü $emit metodunu kullanarak şablon ifadelerinde doğrudan özel olaylar yayabilir (örneğin, bir v-on işleyicisinde):

<!-- MyComponent -->
<button @click="$emit('someEvent')">Bana Tıkla</button>

$emit() metodu, bileşen örneği üzerinde this.$emit() olarak da mevcuttur:

export default {
  methods: {
    submit() {
      this.$emit('someEvent')
    }
  }
}

Ana bileşen daha sonra v-on kullanarak bunu dinleyebilir:

<MyComponent @some-event="callback" />

.once değiştiricisi de bileşen olay dinleyicilerinde desteklenmektedir:

<MyComponent @some-event.once="callback" />

Bileşenler ve props gibi, olay adları otomatik bir case dönüşümü sağlar. CamelCase bir olayı yaydığımızı, ancak ana bileşende kebab-case dinleyicisi ile dinleyebileceğimizi unutmayın. Props casing ile olduğu gibi, şablonlarda kebab-case olay dinleyicilerini kullanmanızı öneririz.

ipucu

Yerel DOM olaylarının aksine, bileşen tarafından yayılan olaylar fısıldamaz. sadece doğrudan alt bileşen tarafından yayılan olayları dinleyebilirsiniz. Kardeş veya derinlemesine iç içe geçmiş bileşenler arasında iletişime ihtiyaç varsa, bir dış olay otobüsü veya küresel durum yönetim çözümü kullanın.

Olay Argümanları

Bazen bir olayla belirli bir değeri yaymak faydalı olabilir. Örneğin, `bileşeninin metni ne kadar büyüteceğinden sorumlu olmasını isteyebiliriz. Bu durumlarda,$emit`'e ekstra argümanlar geçerek bu değeri sağlayabiliriz:

<button @click="$emit('increaseBy', 1)">
  1 Artır
</button>

Sonra, ana bileşende olayı dinlediğimizde, olay argümanına erişmemizi sağlayan bir inline ok fonksiyonu kullanabiliriz:

<MyButton @increase-by="(n) => count += n" />

Ya da, olay işleyicisi bir metod ise:

<MyButton @increase-by="increaseCount" />

O zaman değer, o metodun ilk parametresi olarak geçirilir:

methods: {
  increaseCount(n) {
    this.count += n
  }
}

function increaseCount(n) {
  count.value += n
}

ipucu

Olay adı sonrasında $emit()'e geçirilen tüm ekstra argümanlar, dinleyiciye iletilecektir. Örneğin, $emit('foo', 1, 2, 3) ile dinleyici fonksiyonu üç argüman alacaktır.

Yayınlanan Olayların Bildirilmesi

Bir bileşen, defineEmits() makrosunuemits seçeneğini kullanarak yayacağı olayları açıkça bildirebilir:

<script setup>
defineEmits(['inFocus', 'submit'])
</script>

içinde kullandığımız `$emit` metodu, bir bileşenin bölümünde erişilebilir değildir, ancak defineEmits() bunun yerine kullanabileceğimiz eşdeğer bir fonksiyon döndürür:

<script setup>
const emit = defineEmits(['inFocus', 'submit'])

function buttonClick() {
  emit('submit')
}
</script>

defineEmits() makrosu, bir fonksiyon içinde kullanılamaz, yukarıdaki örnekte olduğu gibi doğrudan `` içinde yer almalıdır.

Eğer `yerine açık birsetupfonksiyonu kullanıyorsanız, olaylaremitsseçeneği kullanarak belirtilmelidir veemitfonksiyonusetup()` bağlamında açığa çıkar:

export default {
  emits: ['inFocus', 'submit'],
  setup(props, ctx) {
    ctx.emit('submit')
  }
}

setup() bağlamının diğer özellikleri ile birlikte, emit güvenle yapılandırılabilir:

export default {
  emits: ['inFocus', 'submit'],
  setup(props, { emit }) {
    emit('submit')
  }
}

export default {
  emits: ['inFocus', 'submit']
}

emits seçeneği ve defineEmits() makrosu, nesne sözdizimini de destekler. TypeScript kullanıyorsanız, argümanları türlendirebiliriz ve bu da yayılan olayların yükleminin çalışma zamanı doğrulamasını yapmamızı sağlar:

<script setup lang="ts">
const emit = defineEmits({
  submit(payload: { email: string, password: string }) {
    // `true` veya `false` döndür
    // doğrulama geçiş / başarısızlık
  }
})
</script>

Eğer TypeScript'i `` ile birlikte kullanıyorsanız, yayılan olayları saf tür tanımlamaları kullanarak da belirlemek mümkündür:

<script setup lang="ts">
const emit = defineEmits<{
  (e: 'change', id: number): void
  (e: 'update', value: string): void
}>()
</script>

Daha fazla detay: Bileşen Yayınlarını Türlendirme

export default {
  emits: {
    submit(payload: { email: string, password: string }) {
      // `true` veya `false` döndür
      // doğrulama geçiş / başarısızlık
    }
  }
}

Buna ek olarak: Bileşen Yayınlarını Türlendirme

Her ne kadar isteğe bağlı olsa da, yayımlanan tüm olayları tanımlamak, bileşenin nasıl çalışacağını daha iyi belgelendirmek için önerilir. Ayrıca, Vue'ye, bilinen dinleyicilerin geçişli nitelikler dışında bırakılmasına olanak tanır ve 3. parti kodlar tarafından manuel olarak dağıtılan DOM olayları nedeniyle oluşabilecek kenar durumlarını önler.

ipucu

Eğer emits seçeneğinde bir yerel olay (örneğin, click) tanımlanmışsa, dinleyici artık yalnızca bileşen tarafından yayılan click olaylarını dinleyecek ve yerel click olaylarına yanıt vermeyecektir.

Olay Doğrulama

Prop türü doğrulamasına benzer şekilde, yayımlanan bir olay, dizi sözdiziminden ziyade nesne sözdizimi ile tanımlanmışsa doğrulanabilir.

Doğrulama eklemek için, olaya, this.$emit``emit çağrısına geçirilen argümanları alan ve olayın geçerli olup olmadığını belirten bir boolean döndüren bir fonksiyon atama yapılır.

<script setup>
const emit = defineEmits({
  // Doğrulama yok
  click: null,

  // submit olayını doğrula
  submit: ({ email, password }) => {
    if (email && password) {
      return true
    } else {
      console.warn('Geçersiz submit olay yükü!')
      return false
    }
  }
})

function submitForm(email, password) {
  emit('submit', { email, password })
}
</script>

export default {
  emits: {
    // Doğrulama yok
    click: null,

    // submit olayını doğrula
    submit: ({ email, password }) => {
      if (email && password) {
        return true
      } else {
        console.warn('Geçersiz submit olay yükü!')
        return false
      }
    }
  },
  methods: {
    submitForm(email, password) {
      this.$emit('submit', { email, password })
    }
  }
}