时间戳

首页 > 解决方案 > 定义父方法

vue.js - 定义父方法

问题描述

我有 2 个组件：

模态组件

合同表单组件

我想要的是 ？

在我的ContractForm component中，我要定义的submit方法Modal component，这个方法必须获取的formdata ContractForm component。

我的代码

  <modal>
    <contract-form></contract-form>
  </modal>

你知道我该怎么做吗？谢谢

标签： vue.jsvuejs2vue-component

解决方案

有不同的方法来处理这个。

方法一：$emit事件

Vue.js 中典型的数据流结构是父母向下传递道具，孩子向上发射事件。

在您的情况下，您的父母是modal并且它没有要传递的道具，因此您需要担心的只是从您的孩子发出一个事件contact-form并在父母身上监听该事件。

在您的模式中，您有方法提交和取消，因此您可以像这样定义您的模板。

<template>
    <contact-form @submit="submit" @cancel="cancel"/>
</template>

然后在您的联系表单组件中类似于

<template>
  <div id="the-form">  
    <input type="text" v-model="formData.name">
    <input type="text" v-model="formData.email">.
 
    <button @submit="submitData">Submit</button>
    <button @canel="cancel">Cancel</button>
  </div>
</template>

<script>    
   ...
    data(){
        return {
           formData: {}
         }
    },
    methods:{
      submitData(){
           this.$emit('submit',this.formData);
      },
      cancel(){
         this.$emit('cancel');
      }

    }

在您的模态组件方法中，您只需获取从传递的值，@submit然后对它们进行任何您需要的操作。

methods:{
   submit(data){
       console.log(data); //do something with the emitted data
   }
}

请注意，您通常也可以直接从按钮 @click 定义直接发出，而无需添加额外的方法，只要您不需要处理数据或类似的东西。

<button  @click="$emit('submit',formData)">Submit</button>
<button @click="$emit('cancel)">Cancel</button>

方法二：使用$parent“参考”

在这种基本情况下，您可以简单地在您的孩子中引用您的父母并节省大量工作。

在您的联系表格方法中，只需参考您父母的 submit()和cancel()方法。

 methods:{
  submitData(){
       this.$parent.submit(this.formData);
  },
  cancel(){
     this.$parent.cancel();
  }

}

或者更简单，如上面的按钮，只需...

<button  @click="$parent('submit',formData)">Submit</button>
<button @click="$parent('cancel)">Cancel</button>

编辑

在进一步讨论之后，您表示想要扭转这种情况，让孩子告诉父母该怎么做。

在这种情况下，您仍然可以使用第二种方法。您可以将 a 添加ref到您的子组件，然后通过该引用引用该子组件的方法。

所以每当你把一个孩子放在你的模态里时，你都会做这样的事情。

 <the-child-component ref="modalContent"></the-child-component>

然后在您的模态中，您将像这样引用您的子方法。

submit(){
    this.$refs.modalContent.submit();
},

在此处查看一个工作示例> https://jsfiddle.net/skribe/3bwpafr1/

推荐阅读