الخصائص والأحداث والفتحات وعقود المكوّنات

<script setup>
const props = defineProps({
  title: { type: String, required: true }
})
const emit = defineEmits(["change-title"])
</script>

<template>
  <label>
    Note title
    <input :value="props.title" @input="emit('change-title', $event.target.value)">
  </label>
</template>

يحفظ باسم TitleField.vue. ترسل الكتابة النص المقترح وتتبع القيمة المرئية الخاصية القادمة من الأب. لا يحفظ الجزء سجلاً بعيداً أو يتحقق منه.

<script setup>
import { ref } from "vue"
import TitleField from "./TitleField.vue"
const title = ref("Reading notes")
</script>

<template>
  <TitleField :title="title" @change-title="title = $event" />
  <p>Preview: {{ title }}</p>
</template>

يتطلب الأب المكوّن السابق والترجمة المتوافقة. يشترك الإدخال والمعاينة بقيمة الأب الوحيدة، ولم ينفذ ربط أو اختبار حدث متصفح لهذا الجزء.