다른 컴포넌트에서 데이터 접근

다른 컴포넌트에서 데이터 접근

컴포넌트 1이 2개 있습니다.그냥 드롭다운 리스트 v-select

<v-row align="center" >
  <v-col class="d-flex" cols="12" sm="6" v-if="Compounds" >

  <v-select :items="Compounds" 
          v-model="selectedItems" 
          label="Select"
          item-value="id"
          item-text="name"
          v-on:change="selectedCompound">
</v-select>
{{ selectedItems }}
  </v-col>
</v-row>

정연하게

     methods: {
          selectedCompound(h2o) {
         console.log(h2o);
         console.log("This is from Selected Compound");
                 },

다른 페이지로 불러서

          <div>
       <SelectCompound></SelectCompound>
         </div>

이제 "selected Compound" 메서드를 가져와 이 페이지에서 불러오고 싶다.

사용자가 v-select에서 다른 이름을 선택할 때 해당 ID에 액세스하여 페이지를 새로고침할 수 있습니다.

소품도 전해지고 이벤트도 전해집니다.부모와 자녀 간에 직접 소통하고 싶다면 부모에서 자녀에게 소품을 전달하면 아이는 가치 변화에 반응합니다.그러나 하위 구성 요소 변경에 대해 상위 구성 요소가 반응하도록 하려면emit이벤트입니다.

여기 예가 있습니다.

어린아이

methods: {
   selectedCompound(h2o) {
       this.$emit('valChange', h2o)
   },
}

부모

<div>
    <SelectCompound @valChange="handleChange"></SelectCompound>
</div>

methods: {
   handleChange(h2o) {
       // handle here
       console.log('parent noticed change ' + h2o)
   },
}

버스(Vuex 등)를 사용하여 모든 컴포넌트가 개별 상태 매니저와 통신하도록 할 수도 있지만 단순한 짝수 방출에 비해 복잡성이 상당히 높아집니다.

널 위해 이걸 만들었어localStorage페이지를 새로고침해야 할 경우 지속성으로, 선택 옵션 중 하나가 선택되었을 때 이벤트를 내보내는 경우 트리거되는 이 이벤트를 호출됩니다.change선택한 값을 부모에게 전송하기만 하면 됩니다.그리고 라이프 사이클 방법을 사용하여created()의Vue지속성으로부터 값을 초기화합니다.

언급URL : https://stackoverflow.com/questions/58567257/access-data-from-another-component