Vue.js 使用Vue路由器时如何在组件之间传递数据

使用Vue路由器时，如何将数据从一个组件传递到另一个组件

我正在构建一个简单的CRUD应用程序，它有不同的组件。 我的内容是：

• App.vue-渲染路由器视图的位置
• Contacts.vue-其中有联系人对象数组
• ContactItem.vue-处理联系人的显示方式（将联系人作为道具从contact.vue获取）
• AddContact.vue-添加新联系人
• EditContact.vue-编辑所选联系人

在

AddContact

组件上，我有一个用户填写的表单，然后单击submit按钮将表单添加到

Contacts.vue

中的主组件中，但是当我发出事件并在

Contacts.vue

组件上调用它时，它不起作用。我没有得到任何输出，但从devtools可以看到事件是从哪个组件触发的

AddContact.vue

组件

这是你的电话号码

从“/components/layout/Navbar”导入导航栏；
导出默认值{
组成部分：{
导航栏
}
};

从“/ContactItem”导入ContactItem；
导出默认值{
组成部分：{
联系人项目
},
数据（）{
返回{
联系人：[
{
id:1，
姓名：“约翰·多伊”，
电子邮件：“jdoe@gmail.com",
电话：“55-55-55”
},
{
id:2，
姓名：“凯伦·史密斯”，
电子邮件：“karen@gmail.com",
电话：“222-222-222”
},
{
id:3，
姓名：“亨利·约翰逊”，
电子邮件：“henry@gmail.com",
电话：“099-099-099”
}
]
};
},
方法：{
添加联系人（新联系人）{
console.log（newContact）；
this.contacts=[…this.contacts，newContacts]；
}
}
};

添加联系人
从“./layout/TextInputGroup”导入TextInputGroup；
导出默认值{
组成部分：{
文本输入组
},
数据（）{
返回{
姓名：“，
电邮：“，
电话：“
};
},
方法：{
addContact（）{
常数newContact={
姓名：this.name，
电子邮件：this.email，
电话：这个电话
};
此.$emit（“添加联系人”，newContact）；
}
}
};

从一个组件到另一个组件发送数据的方法有很多：

您可以在main.js文件中创建一个新的Vue实例，并将其称为eventBus

  export const eventBus = new Vue();

之后，您可以在任何需要的地方导入此总线：

  import { eventBus } from "main.js"

然后，您可以通过此全局总线发送事件：

  eventBus.$emit("add-contact", newContact);

在另一个组件上，您需要再次导入此总线，并在“创建的”生命周期中侦听此事件：

  created(){
     eventBus.$on("add-contact", function (value){
                                   console.log(value)
                               })
   }

---

另一种方法是将其集中存储在vuex状态。使用“已创建”您可以调用此数据。创建的将在创建vue实例后执行

您是否可以显示您的

联系人。vue

，至少是您拥有

组件的部分以及任何事件处理方法it@Phil我刚刚用更多的代码更新了这个问题，说明

在哪里？它是如何包含在你的应用程序中的？是的，从

我真的不同意，Vue~它也不起作用。它只显示它是从根目录启动的，但我没有看到任何控制台日志，从

AddContact

的输入字段中，我更新了我的Github repo以反映新的更改。我知道为什么它不起作用，因为当你添加一些联系人时，你会不要切换回您的联系人您仍然停留在添加页面。我已经在vuex的帮助下解决了这个问题。我将向您发送一个github链接以下载它。现在我们开始：感谢您的帮助。我知道vuex很好，也知道如何使用它。我正在寻找一种不增加vuex复杂性和额外开销的方法我的代码。尽管如此，如果我能确认唯一可行的方法是我使用Vuex，那么我希望您更新您的答案，以便我将其作为答案。没问题，只有当您立即返回到您的联系人概述时，上面的答案才有效。但无论如何，Vuex是更好的选择。仍然有一些小问题需要解决因为我用nuxt.js编码，所以vuex有点不同