javascript - 如何在 vuejs2 中将道具从子级重置为父级

Question

我制作了一个表单模板（form.vue），其中包含保存功能以避免重复它和 HTML 的某些部分，我还想将它发送到那里并重新启动父表单的道具（authors_form.vue）

这个模板是孩子：

     <template>
            <v-flex xs12 sm12 lg6>
            <v-card>
                <v-toolbar color="pink">
                    <v-card-title primary-title>{{ source.title }}</v-card-title>
                </v-toolbar>
                <v-form v-model="valid" >
                    <slot name='content-form'></slot>
                </v-form>
                <v-card-actions>
                    <v-spacer></v-spacer>
                    <v-btn color="green darken-1" flat="flat" @click="save()"  :disabled="!valid">Save</v-btn>
                    <v-btn color="green darken-1" flat="flat" @click="$router.push(source.return)">Cancel</v-btn>          
                </v-card-actions>
            </v-card>
            <v-dialog v-model="dialog" max-width="290">
              <v-card>
                <v-card-title class="headline">{{ msm }}</v-card-title>
                <v-card-actions>
                  <v-spacer></v-spacer>
                  <v-btn color="green darken-1" flat="flat"  @click="$router.push(source.return)">return to list</v-btn>
                  <v-btn color="green darken-1" flat="flat"  @click.native="resetForm">continue here</v-btn>
                </v-card-actions>
              </v-card>
            </v-dialog>
            </v-flex>
        </template>
        <script>
        export default {
            props:{
                source:Object,
                form:Object
            },
            data: () => ({
                valid: true,
                dialog:false,
                msm:'',
                error:false
            }),
            methods:{
                save(){
                        let vm=this
                        axios[this.source.method](this.source.create,this.form)
                            .then(function(response) {
                                Vue.set(vm.$data,'msm',response.data)
                            })
                            .catch(function(error) {
                                Vue.set(vm.$data, 'msm', error.response)
                                Vue.set(vm.$data,'error',true)
                        })
                        this.dialog=true
                    },
                resetForm(){
                    /*
                        reset props
                    */ 
                    this.dialog=false
                }
            } 
        }
        </script>

发送的道具是一个对象，因为我认为它使模板更可重用，起初我使用 $ emit 但这意味着我必须在每个表单中定义重置方法（authors_form.vue, books_form.vue,editorial_form .vue等。 ..)。

此模板是以下表单之一（父级）：

 <template>
      <v-layout justify-center align-center >
        <form-component :source='source' :form='form'>
            <div slot='content-form'>
                <v-text-field v-model='form.name' :rules="nameRules" ></v-text-field>
            </div>
        </form-component>
      </v-layout>
    </template>
    <script>
    import formComponent from "../utilities/form.vue"
    export default {
        data: () => ({
            source:{
                title:'Add Author',
                create:'admin/Authors',
                method:'post',
                return:'/Authors'
            },
            form:{
                name:''
            },
            nameRules:[
                    v=> /^[A-Za-z\s]*$/gi.test(v) || 'sorry, the only letters ',
                    v=> !!v || 'sorry, the name es rquired'
            ],

        }),
        beforeMount(){
            if(this.$route.meta.mode === 'edit') {
            this.source.title = 'Edit author'
            this.source.create = 'admin/Authors/' + this.$route.params.id
            this.source.method = 'put'
            this.form.name=this.$route.params.name
            }
        },
        components:{
            formComponent
        }
    }
    </script>

标签： javascriptvuejs2