Vue-Router를 사용할 때 컴포넌트 간에 데이터를 전달하는 방법

Vue-Router를 사용할 때 컴포넌트 간에 데이터를 전달하는 방법

Vue 라우터를 사용할 때 컴포넌트 간에 데이터를 전달하려면 어떻게 해야 합니까?

컴포넌트가 다른 심플한 CRUD 앱을 만들고 있습니다.구성 요소는 다음과 같습니다.

• App.vue - 라우터 뷰를 렌더링합니다.
• 연락처vue - 연락처 오브젝트의 배열이 있습니다.
• Contact Item(연락처 항목)vue - 접촉이 표시되는 방식을 처리합니다(접촉의 지지대로 접촉이 이루어짐).표시하다
• 연락처 추가vue - 새 연락처 추가
• 연락처 편집vue - 선택한 연락처를 편집합니다.

에서AddContact컴포넌트, 사용자가 기입한 폼이 있으며, 그 폼을 메인 컴포넌트에 추가하기 위해 [Submit]버튼을 클릭합니다.Contacts.vue이벤트를 내보내고 그 이벤트를 호출할 때Contacts.vue컴포넌트, 작동하지 않습니다.출력은 표시되지 않지만 devtools에서 이벤트가 트리거된 것을 알 수 있습니다.AddContact.vue요소.

여기 Github 링크가 있습니다.

<!-- 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>

컴포넌트에서 컴포넌트로 데이터를 전송하는 방법은 다음과 같습니다.

main.js 파일에 새 Vue 인스턴스를 생성하여 eventBus라고 부를 수 있습니다.

  export const eventBus = new Vue();

그 후, 필요에 따라서 이 버스를 Import 할 수 있습니다.

  import { eventBus } from "main.js"

그런 다음 이 글로벌버스를 통해 이벤트를 전송할 수 있습니다.

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

다른 컴포넌트에서는 이 버스를 다시 Import하여 "작성한" 라이프 사이클에서 이 이벤트를 재생해야 합니다.

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

다른 방법은 vuex 상태에서 중앙 집중식으로 저장하는 것입니다."created"를 사용하면 이 데이터를 호출할 수 있습니다.생성된 vue 인스턴스가 생성된 후 실행됨

언급URL : https://stackoverflow.com/questions/58403341/how-to-pass-data-between-components-when-using-vue-router