VueJ에서 한 하위 구성요소에서 다른 구성요소로 값을 전달하는 방법은 무엇입니까?

VueJ에서 한 하위 구성요소에서 다른 구성요소로 값을 전달하는 방법은 무엇입니까?

전체 소스 코드: https://github.com/tenzan/menu-ui-tw

데모: https://flamboyant-euclid-6fcb57.netlify.com/

목표:

ItemsList그리고.ItemImage의 하위 컴포넌트입니다.Menu.vue통과해야 합니다.image_url부터ItemsList로.ItemImage오른쪽 이미지를 변경하려면 왼쪽 항목이 시간 간격으로 자동으로 변경됩니다.

• 좌측: 컴포넌트ItemsList.vue
• 우측: 컴포넌트ItemImage.vue

Component Menu.vue에는 2개의 하위 구성 요소가 있습니다.

<template>
  <div>
    <!-- Two columns -->
    <div class="flex mb-4">
      <div class="w-1/2 bg-gray-400">
        <ItemsList />
      </div>
      <div class="w-1/2 bg-gray-500">
        <ItemImage></ItemImage>
      </div>
    </div>
  </div>
</template>

<script>
import ItemsList from "./ItemsList";
import ItemImage from "./ItemImage";

export default {
  components: {
    ItemsList,
    ItemImage
  }
};
</script>

Items List(항목 리스트)vue:

<template>
  <div>
    <div v-for="item in menuItems" :key="item.name">
      <ul
        class="flex justify-between bg-gray-200"
        :class="item.highlight ? 'highlight' : ''"
      >
        <p class="px-4 py-2 m-2">
          {{ item.name }}
        </p>
        <p class="px-4 py-2 m-2">
          {{ item.price }}
        </p>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      menuItems: [
        {
          name: "Apple",
          price: 20,
          image_url: "../assets/images/apple.jpg"
        },
        {
          name: "Orange",
          price: 21,
          image_url: "../assets/images/orange.jpg"
        },
        {
          name: "Banana",
          price: 22,
          image_url: "../assets/images/banana.jpg"
        },
        {
          name: "Grape",
          price: 23,
          image_url: "../assets/images/grape.jpg"
        }
      ]
    };
  },
  created() {
    var self = this;
    self.menuItems.map((x, i) => {
      self.$set(self.menuItems[i], "highlight", false);
    });
    var init = 0;
    setInterval(function() {
      if (init === self.menuItems.length) {
        init = 0;
      }
      self.menuItems[init].highlight = true;
      if (init === 0) {
        self.menuItems[self.menuItems.length - 1].highlight = false;
      } else {
        self.menuItems[init - 1].highlight = false;
      }
      init++;
    }, 2000);
  }
};
</script>

<style scoped>
.highlight {
  background-color: gray;
}
</style>

ItemImage.vue - 거의 비어 있습니다.

<template>
  <div><p>Hello from ItemImage component</p></div>
</template>

<script>
export default {
  props: ["image_url"]
};
</script>

Items List는 각 항목을 반복하여 강조 표시합니다.그 액티브/하이라이트 된 아이템의 이미지를 표시하려면 컴포넌트 ItemImage가 필요합니다.이미지의 URL은item.image_url.

ItemsList 컴포넌트에서 image_url을 사용하여 이벤트를 내보내고 메뉴 컴포넌트에서 image_url을 ItemImage 컴포넌트로 전달합니다.나는 이것을 아래 코드와 체크박스로 했다.

https://codesandbox.io/s/wild-moon-mbto4

하위 구성 요소에서 상위 구성 요소로 이벤트를 내보내 볼 수 있습니다.

하위 구성 요소 ItemsList.vue에서 상위 구성 요소(하이라이트 속성이 true로 설정됨)로 이벤트를 내보냅니다.

created() {
    var self = this;
    self.menuItems.map((x, i) => {
      self.$set(self.menuItems[i], "highlight", false);
    });
    var init = 0;
    setInterval(function() {
      if (init === self.menuItems.length) {
        init = 0;
      }
      self.menuItems[init].highlight = true;

      //emit an event to trigger parent event
      this.$emit('itemIsHighlighted', menuItems[init].image_url)

      if (init === 0) {
        self.menuItems[self.menuItems.length - 1].highlight = false;
      } else {
        self.menuItems[init - 1].highlight = false;
      }
      init++;
    }, 2000);
  }

다음으로 부모 컴포넌트 Menu.vue에서 다음을 수행합니다.

<ItemsList @itemIsHighlighted="onItemHighlighted"/>
<ItemImage :image_url="this.selectedItem" ></ItemImage>

...

export default {
    data() {
        return {
            selectedItem: '' 
        } 
    }, 
    methods: {
        onItemHighlighted(value) {
            console.log(value) // someValue
            this.selectedItem = value
        }
    }
}

테스트는 못 했지만 도움이 됐으면 좋겠어요.

이 답변은 여기서도 확인하실 수 있습니다.

추신: Vuex를 사용하면 이 작업이 훨씬 더 쉬워질 것입니다.

언급URL : https://stackoverflow.com/questions/59855921/how-to-pass-value-from-one-child-component-to-another-in-vuejs