How can I share events between components?

[SomeOne-49]

I have two components within a parent component 'app': one has an edit button and a username display, and the other has an input field. When I click the edit button in the first component, I want to extract the username and pass it to the input field in the second component, to set it as the current value of the input field.

First Component:

<script setup>
defineProps({
  users: {
    type: Array,
    required: true
  }
})
const emit = defineEmits(['delete', 'edit']);
const deleteUser = (id) => {
  emit('delete', id)
}
const editUser = (id) => {
  emit('edit', id)
}
</script>
<template>
  <h1 class="text-danger">Users:</h1>
  <ul class="d-flex gap-2 flex-column">
    <li v-for="(user, idx) in users" :key="user.id" class="d-flex align-items-center gap-2 justify-content-between">
      <div class="d-flex align-items-center gap-2">
        <h2 class="text-success">{{ idx + 1 }}-</h2>
        <h2>{{ user.name }}: </h2>
        <h3>{{ user.age }}</h3>
      </div>
      <div class="d-flex align-items-center gap-2">
        <button class="btn btn-danger" @click="deleteUser(user.id)">Delete</button>
        <button class="btn btn-success" @click="editUser(user.id)">Edit</button>
      </div>
    </li>
  </ul>
</template>

Second Component

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

const name = ref('');
const age = ref('');
defineProps(['edit'])

const emit = defineEmits(['addUser', 'edituser'])

function addUser(name, age) {
  emit('addUser', {name: name, age: age, id: new Date().toLocaleString()})
  this.name = ''
  this.age = ''
}

function editUser (name, age) {
  emit('edituser', name, age)
  this.name = ''
  this.age = ''
}

</script>
<template>
  <form @submit.prevent="edit ? editUser(name, age) : addUser(name, age)">
    <div class="d-flex gap-4  mb-3 align-items-end">
      <div class="form-group d-flex gap-1 flex-column">
        <label class="fw-bold" for="name">Your Name</label>
        <input class="rounded-3 px-3 py-2 border"  type="text" v-model="name" name="" id="name" placeholder="Your Name">
      </div>
      <div class="form-group d-flex gap-1 flex-column">
        <label class="fw-bold" for="age">Your Age</label>
        <input class="rounded-3 px-3 py-2 border" type="text" v-model="age" name="" id="age" placeholder="Your Age">
      </div>
      <div class="form-group">
        <button class="btn btn-primary">{{edit ? 'Edit' :'Add'}}</button>
      </div>
    </div>
  </form>
</template>

[OnlyWick]

Think of provide/inject, or use State Store Manage, e.g. pinia. Using emit is not very convenient for state sharing, it just a pub/sub.