Question

我有一个带有表单的组件，我有一个带输入[＆＃39; file＆＃39;]的嵌套组件。嵌套组件有一个方法＆＃39; removeFile＆＃39;。提交表单时如何执行此方法？

// 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 ref='foo'></>

然后在您的父母中，您可以访问该组件，即“$ refs.foo＆＃39;这将包含孩子的所有正常方法和数据。

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

如何执行嵌套组件的方法

1 个答案: