<template>
  <div class="child">
    <h4>我是子組件</h4>
    <!-- 輸入框輸入內(nèi)容，觸發(fā)input事件，傳遞輸入值 -->
    <input 
      type="text" 
      v-model="childInput" 
      @input="handleInput"
      placeholder="請輸入要傳遞給父組件的內(nèi)容"
    />
    <!-- 按鈕點(diǎn)擊，傳遞固定數(shù)據(jù) -->
    <button @click="handleClick" style="margin-top: 10px;">
      點(diǎn)擊向父組件傳值
    </button>
  </div>
</template>

<script setup>
// 1. 聲明要觸發(fā)的自定義事件（數(shù)組形式，元素是事件名）
// 可選，但推薦聲明：增強(qiáng)代碼可讀性，IDE會(huì)有語法提示，避免拼寫錯(cuò)誤
const emit = defineEmits(['inputChange', 'btnClick'])

// 子組件內(nèi)部數(shù)據(jù)
const childInput = ref('')

// 輸入框變化時(shí)，觸發(fā)事件并傳遞輸入值
const handleInput = () => {
  // 2. 觸發(fā)事件：第一個(gè)參數(shù)是事件名，第二個(gè)參數(shù)是要傳遞的數(shù)據(jù)（可選，可多個(gè)）
  emit('inputChange', childInput.value)
}

// 按鈕點(diǎn)擊時(shí)，觸發(fā)事件并傳遞固定對(duì)象
const handleClick = () => {
  emit('btnClick', {
    name: '子組件',
    msg: '這是子組件通過點(diǎn)擊按鈕傳遞的數(shù)據(jù)'
  })
}
</script>

<template>
  <div class="parent">
    <h3>我是父組件</h3>
    <p>子組件輸入的內(nèi)容：{{ parentMsg }}</p>
    <p>子組件點(diǎn)擊傳遞的數(shù)據(jù)：{{ parentData }}</p>
    
    <!-- 3. 監(jiān)聽子組件聲明的自定義事件，綁定處理函數(shù) -->
    <Child 
      @inputChange="handleInputChange"
      @btnClick="handleBtnClick"
    />
  </div>
</template>

<script setup>
// 引入子組件
import Child from './Child.vue'
import { ref, reactive } from 'vue'

// 父組件接收數(shù)據(jù)的容器
const parentMsg = ref('')
const parentData = reactive({
  name: '',
  msg: ''
})

// 4. 處理子組件觸發(fā)的inputChange事件，接收傳遞的數(shù)據(jù)
const handleInputChange = (val) => {
  // val 就是子組件emit傳遞過來的值（childInput.value）
  parentMsg.value = val
}

// 處理子組件觸發(fā)的btnClick事件，接收傳遞的對(duì)象
const handleBtnClick = (data) => {
  // data 是子組件傳遞的對(duì)象，直接解構(gòu)或賦值即可
  parentData.name = data.name
  parentData.msg = data.msg
}
</script>

<script setup>
// 對(duì)象形式聲明事件，key是事件名，value是校驗(yàn)函數(shù)（參數(shù)是子組件傳遞的數(shù)據(jù)，返回boolean）
const emit = defineEmits({
  // 校驗(yàn)inputChange事件傳遞的數(shù)據(jù)必須是字符串
  inputChange: (val) => {
    return typeof val === 'string'
  },
  // 校驗(yàn)btnClick事件傳遞的數(shù)據(jù)必須是對(duì)象，且包含name和msg屬性
  btnClick: (data) => {
    return typeof data === 'object' && 'name' in data && 'msg' in data
  }
})

// 若傳遞的數(shù)據(jù)不符合校驗(yàn)，控制臺(tái)會(huì)報(bào)警告（不影響代碼運(yùn)行，僅提示）
const handleInput = () => {
  emit('inputChange', 123) // 傳遞數(shù)字，不符合校驗(yàn)，控制臺(tái)報(bào)警告
}
</script>

<!-- 子組件（Child.vue） -->
<template>
  <div class="child">
    <h4>子組件開關(guān)</h4>
    <button @click="handleSwitch">
      {{ isOpen ? '關(guān)閉' : '打開' }}
    </button>
  </div>
</template>

<script setup>
// 1. 接收父組件通過v-model傳遞的modelValue
const props = defineProps(['modelValue'])
// 2. 聲明update:modelValue事件（固定命名，不可修改）
const emit = defineEmits(['update:modelValue'])

// 子組件內(nèi)部使用父組件傳遞的值
const isOpen = computed(() => props.modelValue)

// 開關(guān)切換，觸發(fā)事件，修改父組件數(shù)據(jù)
const handleSwitch = () => {
  emit('update:modelValue', !isOpen.value)
}
</script>

<!-- 父組件（Parent.vue） -->
<template>
  <div class="parent">
    <h3>父組件：{{ isSwitchOpen ? '開關(guān)已打開' : '開關(guān)已關(guān)閉' }}</h3>
    <!-- 直接使用v-model，無需手動(dòng)監(jiān)聽事件 -->
    <Child v-model="isSwitchOpen" />
  </div>
</template>

<script setup>
import Child from './Child.vue'
import { ref } from 'vue'

const isSwitchOpen = ref(false)
</script>

<!-- 父組件 -->
<Child 
  v-model:name="parentName" 
  v-model:age="parentAge" 
/>

<!-- 子組件 -->
<script setup>
// 接收多個(gè)v-model傳遞的props
const props = defineProps(['name', 'age'])
// 聲明對(duì)應(yīng)的update事件
const emit = defineEmits(['update:name', 'update:age'])

// 觸發(fā)事件修改父組件數(shù)據(jù)
emit('update:name', '新名字')
emit('update:age', 25)
</script>

<!-- 子組件（FormChild.vue） -->
<template>
  <div class="form-child">
    <input v-model="form.name" placeholder="請輸入姓名" />
    <input v-model="form.age" type="number" placeholder="請輸入年齡" />
    <button @click="handleSubmit">提交表單</button>
  </div>
</template>

<script setup>
import { reactive } from 'vue'

const emit = defineEmits(['form-submit'])

const form = reactive({
  name: '',
  age: ''
})

const handleSubmit = () => {
  // 表單校驗(yàn)（簡化）
  if (!form.name || !form.age) return alert('請?zhí)顚懲暾畔?)
  // 提交表單數(shù)據(jù)給父組件
  emit('form-submit', form)
  // 提交后重置表單
  form.name = ''
  form.age = ''
}
</script>

<!-- 子組件（ModalChild.vue） -->
<template>
  <div class="modal" v-if="visible">
    <div class="modal-content">
      <h4>子組件彈窗</h4>
      <button @click="handleClose">關(guān)閉彈窗</button>
    </div>
  </div>
</template>

<script setup>
const props = defineProps(['visible'])
const emit = defineEmits(['close-modal'])

const handleClose = () => {
  // 觸發(fā)關(guān)閉事件，通知父組件隱藏彈窗
  emit('close-modal')
}
</script>

<!-- 子組件（ListChild.vue） -->
<template>
  <div class="list-child">
    <div v-for="item in list" :key="item.id">
      {{ item.name }}
      <button @click="handleDelete(item.id)">刪除</button>
    </div>
  </div>
</template>

<script setup>
const props = defineProps(['list'])
const emit = defineEmits(['delete-item'])

const handleDelete = (id) => {
  // 傳遞要?jiǎng)h除的id給父組件，由父組件更新列表
  emit('delete-item', id)
}
</script>