如何在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

此代码的主要问题是LocationSelect中的处理程序是在 this.$parent.$refs.modal存在之前添加的。在安装组件之前，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中添加此方法：

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

在父模板中添加ref：

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

如果您这样做，那么当父母清除时，孩子也会自动清除。