如何从 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())
  }
}

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

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

如果你这样做了，那么当父级清除时，子级也会自动清除。