Vue.js: Comunicação entre Componentes

<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
  タイトル: 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>

<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>

<!-- 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>

Grade com iPhone (botão ativo) e MacBook "Out of Stock"
Clique no iPhone → handleAddToCart(1) → addToCart(1)
@quick-view / @toggle-favorite → console: Quick view: 1 / Toggle: 1 false

<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

<!-- 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>

input vazio; Query: (vazio)
Digite "vue" → Query: vue (update:modelValue a cada tecla)

<label>Name</label>
<input placeholder="Enter name..." class="input-field">
Atributos extras vão para o input, não para o label

Card: "iPhone", "$999", botão "Add to Cart"
Clique → emit('add-to-cart', 1)
stock = 0 → "Out of Stock", botão desabilitado, card com opacity