<template>
  <label>这是子组件内容：</label>
  <!-- 3. 使用$emit绑定事件并且回传参数 -->
  名称：<input type="text" :value="name" @input="$emit('update:name', $event.target.value)"/>
  标题：<input type="text" :value="title" @input="$emit('update:title', $event.target.value)"/>
  <p>名称是：{{name}}</p>
  <p>标题是：{{title}}</p>
</template>

<script>
export default {
  // 1. 子组件定义用于映射父组件数据的变量
  props: {
    name: String,
    title: String,
  },
  // 2. 注册自定义事件
  emits: ['update:name', 'update:title'],
}
</script>

<style scoped>

</style>
