// Insider Trading

/*
The Insider Trading pattern solves the issue of overly coupled parent-child components in Vue. We simplify by inlining child components into their parent when necessary.
*/


<!-- ParentComponent.vue -->
<template>
  <div>
    <!-- This component uses everything from the parent.
         So what purpose is it serving? -->
    <ChildComponent
      :user-name="userName"
      :email-address="emailAddress"
      :phone-number="phoneNumber"
      @user-update="(val) => $emit('user-update', val)"
      @email-update="(val) => $emit('email-update', val)"
      @phone-update="(val) => $emit('phone-update', val)"
    />
  </div>
</template>

<script setup>
  defineProps({
    userName: String,
    emailAddress: String,
    phoneNumber: String,
  });
  defineEmits(['user-update', 'email-update', 'phone-update']);
</script>