상위 구성 요소에서 하위 구성 요소의 형식을 재설정합니다.

상위 구성 요소에서 하위 구성 요소의 형식을 재설정합니다.

부모 컴포넌트와 자식 컴포넌트가 있습니다.하위 구성 요소가 상위 구성 요소의 대화 상자 안에 있습니다.이 대화 상자가 표시되거나 숨겨집니다.

부모 컴포넌트

<template>
    <div>
        <v-dialog v-model="dialog">
            <product-form></product-form>
        </v-dialog>
    </div>
</template>

내 자식 구성 요소(제품 양식)

<template>
  <div>
    .....
    <input type="text" v-model="data">
    .....
  </div>
</template>
<script>
  export default {

    data: () => ({
        data: '',
    }),
    methods:{

      onSubmitProduct(){

        //send data to server        
      }
    },
}
</script>

대화 상자가 표시될 때마다 자식 양식을 지워야 합니다.문제는 부모 컴포넌트를 통해 대화상자를 표시하는 것입니다.참고: 상위 구성 요소가 아닌 하위 구성 요소에서 서버로 데이터를 보내야 하므로 하위 구성 요소에서 v-model을 사용하지 않습니다.

누가 나 좀 도와줄래?

* **솔루션 ***

저는 ref를 사용하여 문제를 해결할 수 있었습니다.제 해결책이 모범 사례에 반하는지는 모르겠습니다.하지만 그게 내가 할 수 있는 최선이었어.

//parent component
<template>
    <div>
        <v-dialog v-model="dialog">
            <product-form ref="childComponent"></product-form>
        </v-dialog>
    </div>
</template>

this.$refs.childComponent.resetForm();

-

//child compopnent
<template>
  <div>
    .....
    <input type="text" v-model="data">
    .....
  </div>
</template>
<script>
  export default {

    data: () => ({
        data: '',
    }),
    methods:{

      onSubmitProduct(){

        //send data to server        
      },
      resetForm(){
        //code to reset form
      }
    },
}
</script>

아이에게 소품으로 버스를 건네주는 게 좋을 것 같아요.그러면 아이가 행동할 수 있는 이벤트를 내보낼 수 있습니다.

new Vue({
  el: '#app',
  data: {
    showing: false,
    bus: new Vue()
  },
  methods: {
    toggleDialog() {
      this.showing = !this.showing;
      this.bus.$emit('reset');
    }
  },
  components: {
    productForm: {
      template: '#product-form-template',
      props: ['bus'],
      data() {
        return {
          value: 'you will never see this'
        }
      },
      methods: {
        resetForm() {
          this.value = 'Form was reset';
        }
      },
      created() {
        this.bus.$on('reset', this.resetForm);
      }
    }
  }
});

.dialog {
  outline: 2px solid blue;
  height: 200px;
}

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <button @click="toggleDialog">Toggle dialog</button>
  <div class="dialog" v-show="showing">
    <product-form :bus="bus"></product-form>
  </div>
</div>

<template id="product-form-template">
  <div>
    Type something here: <input v-model="value">
  </div>
</template>

이벤트 이미터는 부모-자녀 통신에 사용해야 합니다.자녀 템플릿에서 이벤트를 듣습니다.

<template>
    <div>
        <v-dialog v-model="dialog">
            <product-form @dialog-shown="clearForm"></product-form>
        </v-dialog>
    </div>
</template>

그리고 당신의 부모에게서 이벤트를 방출합니다:

this.$emit('dialog-shown');

@Renato souza de Oliveira 솔루션을 사용하여 리셋할 수 있습니다.Object.assign(this.$data, this.$options.data())

예를들면

하위 구성 요소

<template>
  <div>
    .....
  </div>
</template>
<script>
  export default {

    data: () => ({
        ....
    }),
    methods:{ ... },
  }
</script>

상위 컴포넌트

<template>
    <div>
        <v-dialog v-model="dialog">
            <child-name ref="childComponent"></child-name>
        </v-dialog>
    </div>
</template>
<script>
  export default {
     ....,
     methods:{
        ....,
        resetChild(){
          const ref = this.$refs.childComponent
          Object.assign(ref.$data, ref.$options.data());
  
        }
     }
}

</script>

언급URL : https://stackoverflow.com/questions/48933321/reset-form-of-child-component-from-parent-component