Question

我有一个父组件和一个子组件。子组件位于父组件的对话框内。此对话框显示或隐藏。

我的父组件

<template>
    <div>
        <v-dialog v-model="dialog">
            <product-form></product-form>
        </v-dialog>
    </div>
</template>

我的孩子组件（产品形式）

<template>
  <div>
    .....
    <input type="text" v-model="data">
    .....
  </div>
</template>
<script>
  export default {

    data: () => ({
        data: '',
    }),
    methods:{

      onSubmitProduct(){

        //send data to server        
      }
    },
}
</script>

每当显示对话框时，我都需要清除子窗体。问题是我通过父组件显示对话框。注意：我不想在子组件中使用v-model，因为我需要从子组件而不是父组件将数据发送到服务器。

有人可以帮助我吗？

* **解决方案 ***

我能够使用ref解决问题。我不知道我的解决方案是否与良好做法相悖。但这是我能做到的最好的。

//parent component
<template>
    <div>
        <v-dialog v-model="dialog">
            <product-form ref="childComponent"></product-form>
        </v-dialog>
    </div>
</template>

this.$refs.childComponent.resetForm();

-

//child compopnent
<template>
  <div>
    .....
    <input type="text" v-model="data">
    .....
  </div>
</template>
<script>
  export default {

    data: () => ({
        data: '',
    }),
    methods:{

      onSubmitProduct(){

        //send data to server        
      },
      resetForm(){
        //code to reset form
      }
    },
}
</script>

Answer 1

您应该使用事件发射器进行父子通信。在您的孩子模板中听取一个事件：

<template>
    <div>
        <v-dialog v-model="dialog">
            <product-form @dialog-shown="clearForm"></product-form>
        </v-dialog>
    </div>
</template>

在您的父母中发出事件：

this.$emit('dialog-shown');

Answer 2

你应该把公共汽车作为道具传给孩子。然后你可以发出一个孩子可以采取行动的事件。

＆＃13;

new Vue({
  el: '#app',
  data: {
    showing: false,
    bus: new Vue()
  },
  methods: {
    toggleDialog() {
      this.showing = !this.showing;
      this.bus.$emit('reset');
    }
  },
  components: {
    productForm: {
      template: '#product-form-template',
      props: ['bus'],
      data() {
        return {
          value: 'you will never see this'
        }
      },
      methods: {
        resetForm() {
          this.value = 'Form was reset';
        }
      },
      created() {
        this.bus.$on('reset', this.resetForm);
      }
    }
  }
});

＆＃13;

.dialog {
  outline: 2px solid blue;
  height: 200px;
}

＆＃13;

<script src="//unpkg.com/vue@latest/dist/vue.js"></script>
<div id="app">
  <button @click="toggleDialog">Toggle dialog</button>
  <div class="dialog" v-show="showing">
    <product-form :bus="bus"></product-form>
  </div>
</div>

<template id="product-form-template">
  <div>
    Type something here: <input v-model="value">
  </div>
</template>

＆＃13;

Answer 3

使用@Renato souza de Oliveira的解决方案，您可以使用Object.assign(this.$data, this.$options.data())重置

例如

子组件

<template>
  <div>
    .....
  </div>
</template>
<script>
  export default {

    data: () => ({
        ....
    }),
    methods:{ ... },
  }
</script>

父组件

<template>
    <div>
        <v-dialog v-model="dialog">
            <child-name ref="childComponent"></child-name>
        </v-dialog>
    </div>
</template>
<script>
  export default {
     ....,
     methods:{
        ....,
        resetChild(){
          const ref = this.$refs.childComponent
          Object.assign(ref.$data, ref.$options.data());
  
        }
     }
}

</script>

从父组件重置子组件的形式

3 个答案: