子コンポーネントのデータをvue.js 2の親コンポーネントからリセットするにはどうすればよいですか？このような

Question

私の親コンポーネント：

<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> 

しかし、それは動作しません

子コンポーネントはデータをリセットしません

どうすればこの問題を解決できますか？

Answer 1

このコードの主な問題は、this.$parent.$refs.modalが存在する前に、LocationSelectでハンドラがが追加されています。 refは、コンポーネントがマウントされるまで存在しません。

これを解決する最も簡単な方法は、コードを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では、このメソッドを追加します。

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

そして、あなたの親のマウント中：親テンプレートで

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

は、参考文献を追加

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" ... /> 

、そして、子供も自動的にクリアされます。