vue.js - 如何从 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 中的处理程序被添加 before 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())
    })
  })
}

处理此问题的另一种方法是向 LocationSelect 组件添加一个 ref 并添加一个可以从父级调用的清除它的方法。在 LocationSelect 中添加此方法:

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

在父模板中添加一个引用:

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

在你 parent 的坐骑中:

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

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