Vue.js: التواصل بين المكونات

<!-- CartItem.vue Child component -->
<template>
  <input :value="quantity" @input="quantity = $event.target.value">
</template>

<script setup>
// ❌ The "Broken" Version:Edit directly prop
const props = defineProps({ quantity: Number })

function update() {
  props.quantity++  // ❌ Vue Warning:Avoid making direct changes prop
}
</script>

<!-- CartItem.vue Child component -->
<template>
  <div>
    <input :value="quantity" @input="$emit('update:quantity', +$evento.target.value)">
  </div>
</template>

<script setup>
const props = defineProps({ quantity: Number })
const emit = defineEmits(['update:quantity'])
</script>

<!-- Cart.vue Parent Component -->
<template>
  <CartItem 
    v-for="item in items" 
    :key="item.id"
    :quantity="item.quantity" 
    @update:quantity="(val) => item.quantity = val"
  />
</template>

<script setup>
defineProps({
  // 1. Basic Types
  name: String,
  age: Number,
  active: Boolean,
  
  // 2. Complex Types
  user: Object,
  items: Array,
  
  // 3. Multiple Types(Any)
  id: [String, Number],
  
  // 4. Required
  title: { type: String, required: true },
  
  // 5. Default value
  pageSize: { type: Number, default: 20 },
  
  // 6. Custom Validation
  email: {
    type: String,
    validator: (val) => val.includes('@')
  },
  
  // 7. Function Default Values(The default value must be a function.)|
  createdAt: {
    type: Date,
    default: () => new Date()
  }
})
</script>

<script setup>
defineProps({
  // String
  title: String,
  
  // Numbers + Default value + Verification
  pageSize: {
    type: Number,
    default: 20,
    validator: (val) => val > 0 && val <= 100
  },
  
  // Boolean(Note:The default value for falsy Values should be in function form)
  isVip: {
    type: Boolean,
    default: false
  },
  
  // Array Default Values(It must be returned as a function)
  tags: {
    type: Array,
    default: () => ['vue', 'javascript']
  },
  
  // Object Default Values(It must be returned as a function)
  user: {
    type: Object,
    default: () => ({ name: 'Guest', age: 0 })
  },
  
  // Required + Custom Validation
  email: {
    type: String,
    required: true,
    validator: (val) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val)
  }
})
</script>

<script setup lang="ts">
interface User {
  id: number
  name: string
  email: string
  role: 'admin' | 'user'
}

defineProps<{
  user: User
  size?: 'small' | 'medium' | 'large'
  showEmail?: boolean
}>()
</script>

defineProps<{
  // Required(Default)
  user: User
  pageSize: number
  
  // Optional (add ?)
  variant?: 'primary' | 'secondary'
  showIcon?: boolean
}>()

<script setup lang="ts">
interface Props {
  user: User
  size?: 'small' | 'medium' | 'large'
  showEmail?: boolean
}

const props = withDefaults(defineProps<Props>(), {
  size: 'medium',
  showEmail: true
})
</script>

<script setup>
// 1. A Brief Statement
const emit = defineEmits(['click', 'submit', 'cancel'])

// 2. Parameter Validation
const emit = defineEmits({
  addToCart: (productId) => typeof productId === 'number',
  remove: (id) => typeof id === 'string'
})

// 3. TypeScript Type
const emit = defineEmits<{
  'add-to-cart': [productId: number]
  'remove-item': [id: string, reason: string]
  'update': [id: number, data: object]
}>()
</script>

<script setup>
const emit = defineEmits(['click', 'submit', 'add-to-cart'])

// 1. Simple Trigger
emit('click')

// 2. Passing Parameters
emit('add-to-cart', 123)

// 3. Pass multiple parameters
emit('submit', { name: 'Alice' }, 2026)

// 4. Conditional Trigger
if (isValid) emit('submit')

// 5. Functional Triggering
function handleAdd() {
  emit('add-to-cart', props.product.id)
}
</script>

<template>
  <ChildComponent 
    @click="handleClick"
    @add-to-cart="handleAdd"
    @submit="handleSubmit"
  />
</template>

<script setup>
function handleClick() { /* No parameters */ }
function handleAdd(productId) { /* 1 parameter */ }
function handleSubmit(data, year) { /* Multiple parameters */ }
</script>

<script setup>
const emit = defineEmits({
  // ✅ Verification:id It must be number
  remove: (id) => typeof id === 'number' || 'Validation failed',
  
  // ❌ Throws Error: When parameters do not match
  // remove: 'invalid',  // Wrong: It must be a function
})
</script>

<script setup>
const props = defineProps({ user: Object })

// ❌ Wrong: Edit prop directly
props.user.name = 'Bob'  // Vue Warning!

// ✅ Exception 1:prop When it is a reference type,Can be replaced with a new object
// The parent component passes a reference,Child components cannot change their references,But it's possible emit Let Father Change It

// ✅ Exception 2:prop Initial values can be saved locally
const localUser = ref({ ...props.user })
// Then make the changes localUser(Does not affect the parent)

// ✅ Exception 3: Use computed Derivative
const userName = computed(() => props.user.name)

// ✅ Exception 4: Use v-model (Syntax Sugar)
// <Child v-model="value" /> equivalent to :value + @update:value

// ✅ Exception 5:provide/inject Across levels
// Parent provide, Child inject (Learned in Phase 2.5)
</script>

// ❌ Anti-pattern 1:Edit directly prop
props.user.name = 'Bob'

// ❌ Anti-pattern 2:Use in child components watch Edit prop
watch(() => props.value, (val) => { props.value = val * 2 })

// ❌ Anti-pattern 3: Two-way bound ref passthrough (Not recommended)
const localRef = ref(props.value)
watch(localRef, (val) => emit('update', val))

// ❌ Anti-pattern 4:Usage v-model Does not follow the naming convention
// v-model Expectations update:xxx Event,Custom event names must be consistent
emit('change', val)  // ❌ Parent Component @change Will not be triggered
emit('update:value', val)  // ✅ v-model Supporting

// ❌ Anti-pattern 5:Managing the parent component's data directly within a child component
emit('update', { ...props.user, name: 'Bob' })  // Wrong: Should only pass ID, Parent updates itselff

<!-- Parent.vue -->
<template>
  <ChildComponent class="parent-class" :title="title" />
</template>

<!-- ChildComponent.vue - By default, messages are received automatically. class="parent-class" -->
<template>
  <div>  <!-- Automatically available class="parent-class" -->
    <h3>{{ title }}</h3>
  </div>
</template>

<script setup>
defineOptions({ inheritAttrs: false })
</script>

<template>
  <!-- class It will not be automatically applied to the root element -->
  <div class="my-class">
    <h3>Title</h3>
  </div>
</template>

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

defineOptions({ inheritAttrs: false })
const attrs = useAttrs()
</script>

<template>
  <div>
    <input v-bind="attrs" />
    <!-- Pass the value from the parent component class/style/Manually bind other properties to input -->
  </div>
</template>

<!-- src/components/ProductCard.vue -->
<template>
  <div :class="['product-card', { 'out-of-stock': !inStock }]">
    <img :src="product.image" :alt="product.name">
    <h3>{{ product.name }}</h3>
    <p class="price">${{ product.price }}</p>
    <span v-if="lowStock" class="badge">Only {{ product.stock }} left</span>
    
    <button :disabled="!inStock" @click="handleAddToCart">
      {{ inStock ? 'Add to Cart' : 'Out of Stock' }}
    </button>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'

interface Product {
  id: number
  name: string
  price: number
  stock: number
  image: string
}

// props Complete Definition
const props = defineProps({
  product: { 
    type: Object as () => Product, 
    required: true,
    validator: (val: Product) => val.id && val.name
  },
  showStockBadge: { type: Boolean, default: true }
})

// emits Complete Definition
const emit = defineEmits({
  'add-to-cart': (productId: number) => typeof productId === 'number',
  'quick-view': (productId: number) => typeof productId === 'number',
  'toggle-favorite': (productId: number, isFavorite: boolean) => 
    typeof productId === 'number' && typeof isFavorite === 'boolean'
})

// Computed Properties
const inStock = computed(() => props.product.stock > 0)
const lowStock = computed(() => props.product.stock > 0 && props.product.stock < 10)

// Event Handling
function handleAddToCart() {
  if (inStock.value) {
    emit('add-to-cart', props.product.id)
  }
}
</script>

<style scoped>
.product-card {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 1rem;
  transition: all 0.2s;
}
.product-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.out-of-stock { opacity: 0.6; }
.badge { background: #f59e0b; color: white; padding: 2px 8px; border-radius: 4px; }
.price { color: #42b883; font-weight: bold; }
</style>

<!-- src/views/ProductListView.vue -->
<template>
  <div class="grid">
    <ProductCard
      v-for="product in products"
      :key="product.id"
      :product="product"
      :show-stock-badge="true"
      @add-to-cart="handleAddToCart"
      @quick-view="handleQuickView"
      @toggle-favorite="handleToggleFavorite"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ProductCard from '@/components/ProductCard.vue'
import { useCart } from '@/composables/useCart'

const products = ref([
  { id: 1, name: 'iPhone', price: 999, stock: 50, image: 'iphone.jpg' },
  { id: 2, name: 'MacBook', price: 2499, stock: 0, image: 'macbook.jpg' }
])

const { addToCart } = useCart()

function handleAddToCart(productId) {
  addToCart(productId)
}
function handleQuickView(productId) {
  console.log('Quick view:', productId)
}
function handleToggleFavorite(productId, isFavorite) {
  console.log('Toggle:', productId, isFavorite)
}
</script>

<!-- Child component CustomInput.vue -->
<template>
  <input 
    :value="modelValue" 
    @input="$emit('update:modelValue', $event.target.value)"
  >
</template>

<script setup>
defineProps(['modelValue'])
defineEmits(['update:modelValue'])
</script>

<!-- Using Parent Components v-model -->
<template>
  <CustomInput v-model="searchQuery" />
  <p>Query: {{ searchQuery }}</p>
</template>

<script setup>
import { ref } from 'vue'
import CustomInput from '@/components/CustomInput.vue'
const searchQuery = ref('')
</script>

<!-- CustomInput.vue - Multi-element components -->
<template>
  <!-- Multiple elements must be used with inheritAttrs: false -->
  <label>{{ label }}</label>
  <input v-bind="$attrs" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>

<script setup>
defineOptions({ inheritAttrs: false })
defineProps({
  modelValue: String,
  label: String
})
defineEmits(['update:modelValue'])
</script>

<!-- Parent Component -->
<CustomInput v-model="name" label="Name" placeholder="Enter name..." class="input-field" />
<!-- Placeholder and class will be auto-applied to input (No label) -->