vue.js 2의 상위 구성 요소에서 하위 구성 요소의 데이터를 재설정하려면 어떻게 해야 합니까?

vue.js 2의 상위 구성 요소에서 하위 구성 요소의 데이터를 재설정하려면 어떻게 해야 합니까?

부모 컴포넌트는 다음과 같습니다.

<template> 
    <div ref="modal" class="modal" tabindex="-1" role="dialog">
        <div class="modal-dialog" role="document">
            <div class="modal-content modal-content-data">
                <form id="form-data">
                    ...
                    <location-select .../>
                    ...
                </form>
            </div>
        </div>
    </div>
</template>
<script>
    import LocationSelect from './LocationSelect.vue'
    export default{
        name: 'CartModal',
        components:{
            LocationSelect,
        },
        mounted(){
            $(this.$refs.modal).on('hidden.bs.modal', () => {
                Object.assign(this.$data, this.$options.data())
            })
        }
    }
</script>

모달은 숨겨져 있으면 부모 컴포넌트의 데이터를 리셋하여 동작합니다.

하위 구성 요소에서도 데이터를 재설정하고 싶다

저는 이렇게 시도합니다.

<template>
    <select class="form-control" v-model="selected" ...>
        ...
    </select>
</template>
<script>
    export default{
        name: 'LocationSelect',
        ...
        created() {
            $(this.$parent.$refs.modal).on('hidden.bs.modal', () => {
                Object.assign(this.$data, this.$options.data())
            })
        }
    };
</script>

근데 안 돼요

하위 구성 요소가 데이터를 재설정하지 않습니다.

어떻게 하면 이 문제를 해결할 수 있을까요?

이 코드의 주된 문제는 의 핸들러입니다.LocationSelect에 앞서 추가되고 있습니다. this.$parent.$refs.modal존재한다.aref는 컴포넌트를 마운트할 때까지 존재하지 않습니다.

이 문제를 해결하는 가장 쉬운 방법은 코드를 다음 주소로 이동하는 것입니다.mounted.

mounted() {
  $(this.$parent.$refs.modal).on('hidden.bs.modal', () => {
    Object.assign(this.$data, this.$options.data())
  })
}

아니면 그냥 놔둬도 돼created및 사용nextTick.

created() {
  this.$nextTick(() => {
    $(this.$parent.$refs.modal).on('hidden.bs.modal', () => {
      Object.assign(this.$data, this.$options.data())
    })
  })
}

이 문제를 해결하기 위한 또 다른 방법은,ref에게LocationSelect컴포넌트 및 부모로부터 호출할 수 있는 클리어 하는 메서드를 추가합니다.인LocationSelect다음 메서드를 추가합니다.

methods:{
  clear(){
    Object.assign(this.$data, this.$options.data())
  }
}

상위 템플릿에 참조를 추가합니다.

<location-select ref="locationSelect" ... />

그리고 당신 부모님의 기마에는:

mounted(){
  $(this.$refs.modal).on('hidden.bs.modal', () => {
    Object.assign(this.$data, this.$options.data())
    this.$refs.locationSelect.clear()
  })
}

단, Vue를 사용하여 이 문제를 처리하는 가장 일반적인 방법은 컴포넌트를 수정하는 것입니다.v-model부모가 클리어되면 자동으로 클리어 됩니다.

<template>
    <select class="form-control" v-model="selected" ...>
        ...
    </select>
</template>
<script>
    export default {
        props: ["value"],
        name: 'LocationSelect',
        computed:{
          selected:{
            get(){ return this.value },
            set(v) { this.$emit('input', v) }
          }
        },
    };
</script>

다음으로 부모 템플릿에서 다음을 수행합니다.

<location-select v-model="someDataValue" ... />

이렇게 하면 부모가 클리어되면 아이도 자동으로 클리어 됩니다.

언급URL : https://stackoverflow.com/questions/46160368/how-can-i-reset-data-in-child-component-from-parent-component-on-vue-js-2