<template>
  <div class="parent">
    <h3>父組件</h3>
    <!-- 向子組件傳遞商品數(shù)據(jù) -->
    <Child :product="productInfo" />
  </div>
</template>

<script setup>
import Child from './Child.vue'
// 父組件的數(shù)據(jù)源
const productInfo = {
  id: 1001,
  name: "Vue實戰(zhàn)教程",
  price: 99,
  stock: 200
}
</script>

<template>
  <div class="child">
    <h4>子組件 - 商品展示</h4>
    <p>商品ID：{{ product.id }}</p>
    <p>商品名稱：{{ product.name }}</p>
    <p>商品價格：￥{{ product.price }}</p>
  </div>
</template>

<script setup>
// 接收父組件傳遞的props，指定類型（增強健壯性）
const props = defineProps({
  product: {
    type: Object,
    required: true, // 必傳項
    default: () => ({}) // 默認(rèn)值（防止未傳時報錯）
  }
})
</script>

<template>
  <div class="parent">
    <h3>父組件 - 庫存：{{ productInfo.stock }}</h3>
    <!-- 監(jiān)聽子組件觸發(fā)的reduceStock事件 -->
    <Child 
      :product="productInfo" 
      @reduce-stock="handleReduceStock"
    />
  </div>
</template>

<script setup>
import Child from './Child.vue'
import { ref } from 'vue'
// 改用ref聲明響應(yīng)式數(shù)據(jù)（便于修改）
const productInfo = ref({
  id: 1001,
  name: "Vue實戰(zhàn)教程",
  price: 99,
  stock: 200
})

// 處理子組件觸發(fā)的減庫存事件
const handleReduceStock = (num) => {
  if (productInfo.value.stock > 0) {
    productInfo.value.stock -= num
  } else {
    alert('庫存不足！')
  }
}
</script>

<template>
  <div class="child">
    <h4>子組件 - 操作區(qū)</h4>
    <!-- 點擊按鈕觸發(fā)自定義事件，傳遞參數(shù)1 -->
    <button @click="handleClick">減少1件庫存</button>
  </div>
</template>

<script setup>
// 定義子組件可觸發(fā)的事件
const emit = defineEmits(['reduce-stock'])

// 點擊按鈕時，向父組件觸發(fā)事件并傳遞參數(shù)
const handleClick = () => {
  emit('reduce-stock', 1) // 事件名 + 傳遞的參數(shù)
}
</script>

<template>
  <div class="parent">
    <h3>父組件</h3>
    <button @click="callChildMethod">調(diào)用子組件的方法</button>
    <!-- 給子組件綁定ref標(biāo)識 -->
    <Child ref="childRef" />
  </div>
</template>

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

// 定義ref引用子組件實例
const childRef = ref(null)

// 父組件調(diào)用子組件方法
const callChildMethod = () => {
  // 通過ref訪問子組件暴露的方法
  childRef.value.resetForm()
}
</script>

<template>
  <div class="child">
    <h4>子組件 - 表單區(qū)域</h4>
    <input v-model="inputValue" placeholder="請輸入內(nèi)容" />
  </div>
</template>

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

const inputValue = ref('')

// 子組件的內(nèi)部方法
const resetForm = () => {
  inputValue.value = ''
  alert('子組件表單已重置！')
}

// 暴露方法給父組件調(diào)用（關(guān)鍵）
defineExpose({
  resetForm
})
</script>

<template>
  <div class="parent">
    <h3>父組件 - 雙向綁定值：{{ inputValue }}</h3>
    <!-- 自定義v-model綁定 -->
    <Child v-model="inputValue" />
  </div>
</template>

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

// 父組件雙向綁定的數(shù)據(jù)源
const inputValue = ref('初始值')
</script>

<template>
  <div class="child">
    <h4>子組件 - 自定義輸入框</h4>
    <!-- 輸入框值變化時，觸發(fā)update:modelValue事件 -->
    <input 
      :value="modelValue" 
      @input="emit('update:modelValue', $event.target.value)"
    />
  </div>
</template>

<script setup>
// 接收v-model的默認(rèn)props（modelValue）
const props = defineProps(['modelValue'])
// 定義更新事件（update:modelValue是固定命名）
const emit = defineEmits(['update:modelValue'])
</script>

<!-- 父組件 -->
<Child v-model:username="username" v-model:phone="phone" />

<!-- 子組件 -->
<script setup>
const props = defineProps(['username', 'phone'])
const emit = defineEmits(['update:username', 'update:phone'])
</script>

<!-- 子組件中 -->
<script setup>
import { getCurrentInstance } from 'vue'

// 獲取組件實例
const instance = getCurrentInstance()
// 訪問父組件數(shù)據(jù)/方法
console.log(instance.parent.proxy.productInfo)
</script>