vue js의 소품을 사용하여 하위 구성 요소의 속성을 업데이트하려면 어떻게 해야 합니까?

vue js의 소품을 사용하여 하위 구성 요소의 속성을 업데이트하려면 어떻게 해야 합니까?

foodList 컴포넌트(부모)에 addToCart 컴포넌트(자녀)가 있습니다.그리고 다른 컴포넌트 Cart가 있습니다.카트를 비울 때마다 addToCart 컴포넌트의 카운터 값을 0으로 리셋하고 싶습니다.

App.vue

data() {
  return {
    msg: "Welcome to Your Food Ordering App",
    foodData:[],
    cart:[],
    reset:false
 };
},
methods: {
  emptyCart:function(){
    this.reset = true;
    this.cart = [];
  }
}

음식 목록표시하다

export default {
  props:['foods','reset'],
  data() {
    return {

    };
  }
}

<addToCart :reset="reset"></addToCart>

장바구니에 넣기

export default {
  props:['food','reset'],
  data(){
    return {
      counter:0
    }
  },
  beforeMount() {
    if(this.reset) {
      this.counter = 0;
    }
  }

app.vue에서 리셋 속성을 "true"로 수정한 후 food List로 전달합니다.vue, 다음으로 addToCart.vue로 전달합니다.

addToCart.vue에서 리셋 프로펠이 true인지 확인하고 카운터를 0으로 설정합니다.

근데 이게 안 되네. 내가 뭘 놓쳤는지 알려줘.

전체 코드는 이 링크를 참조하십시오.

음식 주문 앱

그러니까 기본적으로는 이 학교에 합격하고 싶다고 하는군요.state여러 컴포넌트에 걸쳐 있습니다.이를 실현하는 방법은 여러 가지가 있습니다.이게 제가 추천하는 세 가지입니다.

중앙 집중식 상태 관리

대처하기 위해서states다음과 같은 중앙 집중식 상태 관리 도구를 쉽게 사용할 수 있습니다.vuex: https://github.com/vuejs/vuex

이는 특히 여러 수준의 컴포넌트에 걸쳐 상태를 전달해야 하는 대규모 애플리케이션의 경우 권장하는 바입니다.날 믿어, 이게 네 삶을 훨씬 편하게 만들어 줄 거야.

속성 바인딩

하위 구성 요소와 통신하는 가장 기본적인 방법은 속성 바인딩입니다.그러나 특히 다단계 커뮤니케이션의 경우 상당히 혼란스러울 수 있습니다.

이 경우 단순히 다음과 같이 추가합니다.counter두 개의 자식 구성 요소 모두props다음과 같이 배열합니다.

foodList.vue (1. 레벨자 컴포넌트)

export default {
  props:['foods','reset', 'counter'],
  // ... your stuff
}

그리고 다음과 같은 컴포넌트를 포함합니다.

<foodList :counter="counter"></foodList>

addToCart.vue (2.레벨 자 컴포넌트)

export default {
  props:['food','reset', 'counter'],
  // ... your stuff
}

마지막으로 다음과 같은 컴포넌트를 포함합니다.

<addToCart :reset="reset" :counter="counter"></addToCart>

마지막 단계로 다음을 지정할 수 있습니다.counter에서data루트 컴포넌트의 오브젝트를 특정에서 수정한다.event.그state전해질 것입니다.

App.vue

data() {
  return {
    // ... your stuff
    counter: 0,
 };
},
methods: {
  emptyCart:function(){
    // ... your stuff
    this.counter = 0; // reset the counter from your parent component
  }
}

이벤트 버스

세 번째 옵션으로 Vue의 이벤트 버스를 사용할 수 있습니다.이 옵션은 간단한 속성 바인딩으로 인해 너무 복잡하지만 여전히 너무 작아서 사용할 수 없는 응용 프로그램에 대해 개인적으로 선택합니다.Centralized State management.

시작하려면 다음과 같은 파일을 만듭니다.event-bus.js다음 코드를 추가합니다.

import Vue from 'vue';
export const EventBus = new Vue();

이제 다음과 같이 상위 구성 요소에서 이벤트를 트리거할 수 있습니다.

App.vue

import { EventBus } from './event-bus.js'; // check the path
export default {
  // ... your stuff
  methods: {
    emptyCart:function(){
      // ... your stuff
      EventBus.$emit('counter-changed', 0); // trigger counter-changed event
    }
  }
}

나서 '아예'를 .counter-changed이벤트를 표시합니다.

장바구니에 넣기.표시하다

import { EventBus } from './event-bus.js';
export default {
  // ... your stuff
  created() {
    EventBus.$on('counter-changed', newCounter => {
      this.counter = newCounter;
    });
  }
 }

이벤트 버스에 대한 자세한 내용은http://https://alligator.io/vuejs/global-event-bus/ 를 참조해 주세요.

언급URL : https://stackoverflow.com/questions/50517113/how-to-update-child-components-property-using-props-in-vue-js