Vue.js 如何执行嵌套组件的方法

我有一个带有表单的组件，还有一个带有输入['file']的嵌套组件。嵌套组件有一个方法“removeFile”。提交表单时如何执行此方法

// form
<form>
    <input type="text">
    <file-input></file-input>
</form>


// component "file-input"
<script>
  export default {
    methods: {
      removeFile() {
        // ***
      }
    }
  };
</script>

<template>
  <div>
    <label>
      <div>
        <span @click="removeFile"></span>
      </div>
      <input type="file">
    </label>
  </div>
</template>

//表单
//组件“文件输入”
导出默认值{
方法：{
removeFile（）{
// ***
}
}
};

在大多数情况下，如果可能，您希望避免这样做。数据应该向下流动，事件应该向上发射

也就是说，您可以通过向子对象添加ref来访问。在child中添加一个

<Child ref='foo'></>

然后在父级中访问组件vie“this.$refs.foo”，该组件将在子级上包含所有常规方法和数据内容