Question

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

我正在构建一个具有不同组件的简单CRUD应用程序。我的建议是：

App.vue-渲染路由器视图的地方
Contacts.vue-我拥有联系人对象数组
ContactItem.vue-处理联系人的显示方式（从contact.vue获取联系人作为道具
AddContact.vue-添加新联系人
EditContact.vue-编辑选定的联系人

在AddContact组件上，我有一个用户填写的表单，然后单击“提交”按钮将表单添加到Contacts.vue中的主要组件中，但是当我发出事件并调用它时Contacts.vue组件，它不起作用。我没有任何输出，但是从devtools可以看到事件是由AddContact.vue组件触发的。

这里是Github link

<!-- App.vue -->
<template>
  <div>
    <Navbar />
    <div class="container">
      <router-view @add-contact="addContact" />
    </div>
  </div>
</template>

<script>
import Navbar from "./components/layout/Navbar";
export default {
  components: {
    Navbar
  }
};
</script>

<!-- Contacts.vue -->
<template>
  <div>
    <div v-for="(contact) in contacts" :key="contact.id">
      <ContactItem :contact="contact" />
    </div>
  </div>
</template>

<script>
import ContactItem from "./ContactItem";

export default {
  components: {
    ContactItem
  },
  data() {
    return {
      contacts: [
        {
          id: 1,
          name: "John Doe",
          email: "jdoe@gmail.com",
          phone: "55-55-55"
        },
        {
          id: 2,
          name: "Karen Smith",
          email: "karen@gmail.com",
          phone: "222-222-222"
        },
        {
          id: 3,
          name: "Henry Johnson",
          email: "henry@gmail.com",
          phone: "099-099-099"
        }
      ]
    };
  },
  methods: {
    addContact(newContact) {
      console.log(newContact);
      this.contacts = [...this.contacts, newContacts];
    }
  }
};
</script>

<!-- AddContact.vue -->
<template>
  <div>
    <div class="card mb-3">
      <div class="card-header">Add Contact</div>
      <div class="card-body">
        <form @submit.prevent="addContact">
          <TextInputGroup
            label="Name"
            name="name"
            placeholder="Enter your name..."
            v-model="name"
            for="name"
          />
          <TextInputGroup
            type="email"
            label="Email"
            name="email"
            placeholder="Enter your email..."
            v-model="email"
          />
          <TextInputGroup
            type="phone"
            label="Phone"
            name="phone"
            placeholder="Enter your phone number..."
            v-model="phone"
          />

          <input type="submit" value="Add Contact" class="btn btn-block btn-light" />
        </form>
      </div>
    </div>
  </div>
</template>

<script>
import TextInputGroup from "../layout/TextInputGroup";
export default {
  components: {
    TextInputGroup
  },
  data() {
    return {
      name: "",
      email: "",
      phone: ""
    };
  },
  methods: {
    addContact() {
      const newContact = {
        name: this.name,
        email: this.email,
        phone: this.phone
      };
      this.$emit("add-contact", newContact);
    }
  }
};
</script>

Answer 1

还有更多的方法可以将数据从一个组件发送到另一个组件：

您可以在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-Router时如何在组件之间传递数据

1 个答案: