如何执行嵌套组件的方法

Question

我有带表单的组件和带输入的嵌套组件['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>

Answer 1

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

话虽如此，您可以通过向 child 添加引用来访问。在 child 中添加一个

<Child ref='foo'></>

然后在您的 parent 中访问组件 vie 'this.$refs.foo'，它将在 child.

上包含所有正常的方法和数据内容

https://vuejs.org/v2/guide/components.html#Child-Component-Refs

如何执行嵌套组件的方法

How to execute a method of a nested component

vue.js

vuejs2