單向數(shù)據(jù)流：
父組件 ──props──> 子組件
父組件 <──emit─── 子組件

雙向綁定：
父組件 <──sync──> 子組件

<template>
  <div>
    <h2>父組件</h2>
    <child-component 
      :message="parentMessage"
      :user-info="userInfo"
      :count="number"
    />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: 'Parent',
  components: {
    ChildComponent
  },
  data() {
    return {
      parentMessage: '來自父組件的消息',
      userInfo: {
        name: '張三',
        age: 25,
        role: 'admin'
      },
      number: 100
    }
  }
}
</script>

<template>
  <div class="child">
    <h3>子組件</h3>
    <p>消息: {{ message }}</p>
    <p>用戶: {{ userInfo.name }} ({{ userInfo.age }}歲)</p>
    <p>數(shù)量: {{ count }}</p>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    // 字符串類型
    message: {
      type: String,
      required: true,
      default: '默認(rèn)消息'
    },
    // 對象類型
    userInfo: {
      type: Object,
      required: true,
      default: () => ({})
    },
    // 數(shù)字類型
    count: {
      type: Number,
      default: 0,
      validator: (value) => value >= 0
    }
  }
}
</script>

export default {
  props: {
    // 基礎(chǔ)類型檢查
    propA: Number,
    propB: [String, Number],
    propC: {
      type: String,
      required: true
    },
    
    // 帶默認(rèn)值的對象
    propD: {
      type: Object,
      default: () => ({ message: 'hello' })
    },
    
    // 帶默認(rèn)值的數(shù)組
    propE: {
      type: Array,
      default: () => []
    },
    
    // 自定義驗證函數(shù)
    propF: {
      validator: (value) => {
        return ['success', 'warning', 'danger'].includes(value)
      }
    }
  }
}

<script>
export default {
  props: ['message'],
  data() {
    return {
      // ? 正確：將 prop 作為本地數(shù)據(jù)的初始值
      localMessage: this.message,
      
      // ? 正確：基于 prop 值定義計算屬性
    }
  },
  computed: {
    normalizedMessage() {
      return this.message.trim().toLowerCase()
    }
  },
  methods: {
    updateMessage() {
      // ? 錯誤：直接修改 prop
      // this.message = 'new value'
      
      // ? 正確：修改本地數(shù)據(jù)
      this.localMessage = 'new value'
      
      // ? 正確：通知父組件更新
      this.$emit('update-message', 'new value')
    }
  }
}
</script>

<template>
  <div class="child">
    <h3>子組件</h3>
    <button @click="sendMessage">發(fā)送消息給父組件</button>
    <button @click="sendData">發(fā)送數(shù)據(jù)給父組件</button>
    <input v-model="inputValue" @input="handleInput" />
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    sendMessage() {
      // 發(fā)送簡單消息
      this.$emit('child-message', '來自子組件的消息')
    },
    
    sendData() {
      // 發(fā)送復(fù)雜數(shù)據(jù)
      const data = {
        type: 'info',
        content: '詳細(xì)信息',
        timestamp: new Date().getTime()
      }
      this.$emit('child-data', data)
    },
    
    handleInput() {
      // 實時傳遞輸入值
      this.$emit('input-change', this.inputValue)
    }
  }
}
</script>

<template>
  <div>
    <h2>父組件</h2>
    <p>來自子組件的消息: {{ messageFromChild }}</p>
    <p>來自子組件的輸入: {{ inputFromChild }}</p>
    
    <child-component 
      @child-message="handleChildMessage"
      @child-data="handleChildData"
      @input-change="handleInputChange"
    />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: 'Parent',
  components: {
    ChildComponent
  },
  data() {
    return {
      messageFromChild: '',
      inputFromChild: ''
    }
  },
  methods: {
    handleChildMessage(message) {
      this.messageFromChild = message
      console.log('收到子組件消息:', message)
    },
    
    handleChildData(data) {
      console.log('收到子組件數(shù)據(jù):', data)
      // 處理復(fù)雜數(shù)據(jù)
      if (data.type === 'info') {
        this.$message.info(data.content)
      }
    },
    
    handleInputChange(value) {
      this.inputFromChild = value
    }
  }
}
</script>

<template>
  <!-- 一次性事件監(jiān)聽器 -->
  <child-component @child-event.once="handleOnce" />
  
  <!-- 事件捕獲模式 -->
  <child-component @child-event.capture="handleCapture" />
  
  <!-- 阻止事件冒泡 -->
  <child-component @child-event.stop="handleStop" />
</template>

<template>
  <div>
    <h2>父組件</h2>
    <p>當(dāng)前值: {{ value }}</p>
    <p>用戶信息: {{ user.name }} - {{ user.email }}</p>
    
    <!-- 使用 .sync 修飾符 -->
    <child-component 
      :value.sync="value"
      :user.sync="user"
    />
    
    <!-- 等價于下面的寫法 -->
    <!--
    <child-component 
      :value="value"
      @update:value="value = $event"
      :user="user"
      @update:user="user = $event"
    />
    -->
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'

export default {
  name: 'Parent',
  components: {
    ChildComponent
  },
  data() {
    return {
      value: 'initial value',
      user: {
        name: '張三',
        email: 'zhangsan@example.com'
      }
    }
  }
}
</script>

<template>
  <div class="child">
    <h3>子組件</h3>
    
    <!-- 修改字符串值 -->
    <input 
      :value="value" 
      @input="updateValue"
      placeholder="修改值"
    />
    
    <!-- 修改對象屬性 -->
    <div>
      <input 
        :value="user.name" 
        @input="updateUserName"
        placeholder="修改姓名"
      />
      <input 
        :value="user.email" 
        @input="updateUserEmail"
        placeholder="修改郵箱"
      />
    </div>
    
    <button @click="reset">重置</button>
  </div>
</template>

<script>
export default {
  name: 'ChildComponent',
  props: {
    value: {
      type: String,
      required: true
    },
    user: {
      type: Object,
      required: true
    }
  },
  methods: {
    updateValue(event) {
      // 觸發(fā) update:value 事件
      this.$emit('update:value', event.target.value)
    },
    
    updateUserName(event) {
      // 更新對象屬性
      const newUser = { ...this.user, name: event.target.value }
      this.$emit('update:user', newUser)
    },
    
    updateUserEmail(event) {
      const newUser = { ...this.user, email: event.target.value }
      this.$emit('update:user', newUser)
    },
    
    reset() {
      this.$emit('update:value', 'reset value')
      this.$emit('update:user', { name: '重置用戶', email: 'reset@example.com' })
    }
  }
}
</script>

<template>
  <!-- 父組件 -->
  <div>
    <custom-dialog
      :visible.sync="dialogVisible"
      :title.sync="dialogTitle"
      :width.sync="dialogWidth"
    />
  </div>
</template>

<script>
// 子組件
export default {
  props: ['visible', 'title', 'width'],
  methods: {
    closeDialog() {
      this.$emit('update:visible', false)
    },
    
    changeTitle(newTitle) {
      this.$emit('update:title', newTitle)
    },
    
    resize(newWidth) {
      this.$emit('update:width', newWidth)
    }
  }
}
</script>

<template>
  <div class="custom-input">
    <label v-if="label">{{ label }}</label>
    <input
      :value="value"
      :type="type"
      :placeholder="placeholder"
      @input="handleInput"
      @blur="handleBlur"
      @focus="handleFocus"
    />
    <span v-if="error" class="error">{{ error }}</span>
  </div>
</template>

<script>
export default {
  name: 'CustomInput',
  // v-model 默認(rèn)使用 value prop 和 input 事件
  props: {
    value: {
      type: [String, Number],
      default: ''
    },
    label: String,
    type: {
      type: String,
      default: 'text'
    },
    placeholder: String,
    error: String
  },
  methods: {
    handleInput(event) {
      // 觸發(fā) input 事件，更新 v-model
      this.$emit('input', event.target.value)
    },
    
    handleBlur(event) {
      this.$emit('blur', event.target.value)
    },
    
    handleFocus(event) {
      this.$emit('focus', event.target.value)
    }
  }
}
</script>

<style scoped>
.custom-input {
  margin-bottom: 16px;
}

.error {
  color: red;
  font-size: 12px;
}
</style>

<template>
  <div>
    <h2>v-model 示例</h2>
    
    <!-- 使用 v-model -->
    <custom-input
      v-model="username"
      label="用戶名"
      placeholder="請輸入用戶名"
      :error="usernameError"
      @blur="validateUsername"
    />
    
    <custom-input
      v-model="email"
      type="email"
      label="郵箱"
      placeholder="請輸入郵箱"
    />
    
    <p>用戶名: {{ username }}</p>
    <p>郵箱: {{ email }}</p>
  </div>
</template>

<script>
import CustomInput from './CustomInput.vue'

export default {
  components: {
    CustomInput
  },
  data() {
    return {
      username: '',
      email: '',
      usernameError: ''
    }
  },
  methods: {
    validateUsername(value) {
      if (value.length < 3) {
        this.usernameError = '用戶名至少3個字符'
      } else {
        this.usernameError = ''
      }
    }
  }
}
</script>

<script>
// 自定義復(fù)選框組件
export default {
  name: 'CustomCheckbox',
  // 自定義 v-model 使用的 prop 和 event
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: {
    checked: Boolean,
    label: String
  },
  methods: {
    toggle() {
      this.$emit('change', !this.checked)
    }
  }
}
</script>

<template>
  <label class="custom-checkbox">
    <input
      type="checkbox"
      :checked="checked"
      @change="toggle"
    />
    <span>{{ label }}</span>
  </label>
</template>

<template>
  <div class="user-form">
    <h3>用戶信息表單</h3>
    
    <div class="form-group">
      <label>姓名</label>
      <input 
        v-model="localUser.name"
        @input="updateUser"
        placeholder="請輸入姓名"
      />
    </div>
    
    <div class="form-group">
      <label>年齡</label>
      <input 
        type="number"
        v-model.number="localUser.age"
        @input="updateUser"
        placeholder="請輸入年齡"
      />
    </div>
    
    <div class="form-group">
      <label>郵箱</label>
      <input 
        type="email"
        v-model="localUser.email"
        @input="updateUser"
        placeholder="請輸入郵箱"
      />
    </div>
    
    <div class="form-actions">
      <button @click="save">保存</button>
      <button @click="cancel">取消</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'UserForm',
  props: {
    user: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      localUser: { ...this.user }
    }
  },
  watch: {
    user: {
      handler(newUser) {
        this.localUser = { ...newUser }
      },
      deep: true
    }
  },
  methods: {
    updateUser() {
      // 實時同步到父組件
      this.$emit('update:user', { ...this.localUser })
    },
    
    save() {
      // 驗證表單
      if (this.validateForm()) {
        this.$emit('save', { ...this.localUser })
      }
    },
    
    cancel() {
      // 重置到原始狀態(tài)
      this.localUser = { ...this.user }
      this.$emit('cancel')
    },
    
    validateForm() {
      if (!this.localUser.name) {
        this.$message.error('請輸入姓名')
        return false
      }
      if (!this.localUser.age || this.localUser.age < 0) {
        this.$message.error('請輸入有效年齡')
        return false
      }
      return true
    }
  }
}
</script>

<style scoped>
.user-form {
  max-width: 400px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.form-group {
  margin-bottom: 16px;
}

.form-group label {
  display: block;
  margin-bottom: 4px;
  font-weight: bold;
}

.form-group input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.form-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.form-actions button {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.form-actions button:first-child {
  background: #007bff;
  color: white;
}

.form-actions button:last-child {
  background: #6c757d;
  color: white;
}
</style>

<template>
  <div>
    <h2>用戶管理</h2>
    
    <user-form
      :user.sync="currentUser"
      @save="handleSave"
      @cancel="handleCancel"
    />
    
    <div class="user-display">
      <h4>當(dāng)前用戶信息:</h4>
      <pre>{{ JSON.stringify(currentUser, null, 2) }}</pre>
    </div>
  </div>
</template>

<script>
import UserForm from './UserForm.vue'

export default {
  components: {
    UserForm
  },
  data() {
    return {
      currentUser: {
        name: '張三',
        age: 25,
        email: 'zhangsan@example.com'
      }
    }
  },
  methods: {
    handleSave(userData) {
      console.log('保存用戶數(shù)據(jù):', userData)
      // 調(diào)用API保存數(shù)據(jù)
      this.saveUserAPI(userData)
    },
    
    handleCancel() {
      console.log('取消編輯')
    },
    
    async saveUserAPI(userData) {
      try {
        // 模擬API調(diào)用
        await new Promise(resolve => setTimeout(resolve, 1000))
        this.$message.success('保存成功')
      } catch (error) {
        this.$message.error('保存失敗')
      }
    }
  }
}
</script>

<template>
  <transition name="modal">
    <div v-if="visible" class="modal-overlay" @click="handleOverlayClick">
      <div class="modal-container" @click.stop>
        <div class="modal-header">
          <h3>{{ title }}</h3>
          <button class="close-btn" @click="close">×</button>
        </div>
        
        <div class="modal-body">
          <slot></slot>
        </div>
        
        <div class="modal-footer" v-if="showFooter">
          <slot name="footer">
            <button @click="confirm">確定</button>
            <button @click="close">取消</button>
          </slot>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: 'Modal',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '提示'
    },
    showFooter: {
      type: Boolean,
      default: true
    },
    closeOnClickOverlay: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    close() {
      this.$emit('update:visible', false)
      this.$emit('close')
    },
    
    confirm() {
      this.$emit('confirm')
      this.close()
    },
    
    handleOverlayClick() {
      if (this.closeOnClickOverlay) {
        this.close()
      }
    }
  }
}
</script>

<style scoped>
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.modal-container {
  background: white;
  border-radius: 8px;
  min-width: 400px;
  max-width: 90vw;
  max-height: 90vh;
  overflow: auto;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #eee;
}

.close-btn {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
}

.modal-body {
  padding: 16px;
}

.modal-footer {
  padding: 16px;
  border-top: 1px solid #eee;
  text-align: right;
}

.modal-footer button {
  margin-left: 8px;
  padding: 8px 16px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
}

.modal-enter-active, .modal-leave-active {
  transition: opacity 0.3s;
}

.modal-enter, .modal-leave-to {
  opacity: 0;
}
</style>

<template>
  <div>
    <button @click="showModal = true">打開模態(tài)框</button>
    
    <modal
      :visible.sync="showModal"
      title="用戶詳情"
      @confirm="handleConfirm"
      @close="handleClose"
    >
      <p>這里是模態(tài)框的內(nèi)容</p>
      <user-form :user.sync="editUser" />
      
      <template #footer>
        <button @click="handleSave">保存</button>
        <button @click="showModal = false">關(guān)閉</button>
      </template>
    </modal>
  </div>
</template>

<script>
import Modal from './Modal.vue'
import UserForm from './UserForm.vue'

export default {
  components: {
    Modal,
    UserForm
  },
  data() {
    return {
      showModal: false,
      editUser: {
        name: '',
        age: 0,
        email: ''
      }
    }
  },
  methods: {
    handleConfirm() {
      console.log('確認(rèn)操作')
    },
    
    handleClose() {
      console.log('關(guān)閉模態(tài)框')
    },
    
    handleSave() {
      console.log('保存用戶:', this.editUser)
      this.showModal = false
    }
  }
}
</script>

// ? 好的命名
export default {
  props: {
    // 使用 camelCase
    userName: String,
    userInfo: Object,
    isActive: Boolean,
    maxCount: Number
  },
  
  methods: {
    // 事件命名使用 kebab-case
    handleUserUpdate() {
      this.$emit('user-update', this.userData)
    },
    
    handleStatusChange() {
      this.$emit('status-change', this.isActive)
    }
  }
}

<!-- 模板中使用 kebab-case -->
<template>
  <child-component
    :user-name="name"
    :user-info="info"
    :is-active="active"
    @user-update="handleUpdate"
    @status-change="handleStatusChange"
  />
</template>

export default {
  props: {
    // 完整的 prop 定義
    user: {
      type: Object,
      required: true,
      validator: (value) => {
        return value && typeof value.id !== 'undefined'
      }
    },
    
    // 枚舉值驗證
    status: {
      type: String,
      default: 'pending',
      validator: (value) => {
        return ['pending', 'success', 'error'].includes(value)
      }
    },
    
    // 數(shù)組默認(rèn)值
    items: {
      type: Array,
      default: () => []
    },
    
    // 對象默認(rèn)值
    config: {
      type: Object,
      default: () => ({
        theme: 'light',
        size: 'medium'
      })
    }
  }
}

export default {
  props: ['value'],
  data() {
    return {
      // ? 創(chuàng)建本地副本
      localValue: this.value
    }
  },
  watch: {
    // ? 監(jiān)聽 prop 變化，同步到本地
    value(newVal) {
      this.localValue = newVal
    },
    
    // ? 監(jiān)聽本地變化，通知父組件
    localValue(newVal) {
      this.$emit('input', newVal)
    }
  }
}

export default {
  methods: {
    // ? 清晰的事件命名
    handleSubmit() {
      const formData = this.getFormData()
      
      // 傳遞有意義的數(shù)據(jù)
      this.$emit('form-submit', {
        data: formData,
        timestamp: Date.now(),
        isValid: this.validateForm()
      })
    },
    
    // ? 錯誤處理事件
    handleError(error) {
      this.$emit('form-error', {
        message: error.message,
        code: error.code,
        field: error.field
      })
    },
    
    // ? 狀態(tài)變化事件
    handleStatusChange(status) {
      this.$emit('status-change', {
        oldStatus: this.currentStatus,
        newStatus: status,
        timestamp: Date.now()
      })
    }
  }
}

// 選擇合適的通信方式
const communicationPatterns = {
  // 簡單的父子通信
  simple: {
    parent: 'props + events',
    usage: '數(shù)據(jù)量少，層級簡單'
  },
  
  // 復(fù)雜數(shù)據(jù)的雙向綁定
  complex: {
    parent: '.sync 修飾符',
    usage: '對象數(shù)據(jù)，需要雙向同步'
  },
  
  // 表單控件
  form: {
    parent: 'v-model',
    usage: '輸入組件，表單控件'
  },
  
  // 深層嵌套組件
  deep: {
    parent: 'provide/inject 或 Vuex',
    usage: '跨多層級的組件通信'
  }
}

// ? 錯誤做法
export default {
  props: ['userInfo'],
  methods: {
    updateUser() {
      // 直接修改 prop 對象
      this.userInfo.name = 'new name'
    }
  }
}

// ? 正確做法
export default {
  props: ['userInfo'],
  methods: {
    updateUser() {
      // 創(chuàng)建新對象，通知父組件更新
      const newUserInfo = { 
        ...this.userInfo, 
        name: 'new name' 
      }
      this.$emit('update:userInfo', newUserInfo)
    }
  }
}

// ? 防抖優(yōu)化
export default {
  props: ['searchQuery'],
  data() {
    return {
      debounceTimer: null
    }
  },
  methods: {
    updateQuery(value) {
      // 防抖處理，避免頻繁觸發(fā)
      clearTimeout(this.debounceTimer)
      this.debounceTimer = setTimeout(() => {
        this.$emit('update:searchQuery', value)
      }, 300)
    }
  }
}

export default {
  props: ['config'],
  watch: {
    // 深度監(jiān)聽對象變化
    config: {
      handler(newConfig, oldConfig) {
        console.log('配置變化:', newConfig)
        this.initializeComponent()
      },
      deep: true,
      immediate: true
    }
  }
}