我开始使用Vue 3，并创建了一些基本的应用程序添加项目到列表。
我有两个组件：ItemList和ItemForm。这两者都添加到主App.vue组件中，如下所示：

应用程序版本-简化版

<template>
  <ItemsList/>
  <ItemForm/>
</template>

在ItemsList中，我有一个名为“items”的属性。还有一个函数addItem（），用于向列表中添加新项。
在ItemForm中有一个表单，在提交时，我希望将此数据从表单发送到ItemsList组件以更新列表视图
我检查了一些东西，没有为我工作（我读到，在Vue 2是EventBus这是用于这种情况）.我不想也学习一些坏的方法来解决问题，所以我向你寻求帮助.
编辑次数

应用程序版本

<template>
  <div>
    <ItemsList/>
  </div>
  
  <div>
    <ItemForm/>
  </div>
</template>
    
<script setup>
import ItemForm from "@/components/ItemForm";
import ItemsList from "@/components/ItemsList";
</script>

物料表单版本

<template>
  <form v-on:submit="addItem">
    <input type="text" v-model="title"/>
    <textarea v-model="description"></textarea>
    <button>Add item</button>
  </form>
</template>
    
<script>
export default {
  data() {
    return {
      title: '',
      description: '' 
    }
  },
  methods: {
    addItem(e) {
      e.preventDefault();
    }
  }
}
</script>

项目列表版本

<template>
  <ul>
    <li v-for="item in items">
      <p><b>{{ item.title }}</b></p>
    </li>
  </ul>
</template>
    
<script>
export default {
  data() {
    return {
      items: []
    }
  },
  methods: {
    addItem: function(item) {
      this.items.push(item);
    }
  },
}
</script>