Vuejs如何在包含组件中使用方法

Question

在Vuejs中，我为表单创建了一个新组件，并将这个新组件添加到现有的索引组件中。在这个新组件中，我想验证几个字段。与我已经在父组件中创建的验证相关的方法。现在，我想在子组件中使用这些函数。我搜索过它并检查了一些解决方案，但它对我不起作用。

父组件：

<div v-if="operation.operationName=='addUser'">
  <add-user-form
    :module="module"
    :operation="operation"
  >
  </add-user-form>
</div>

Answer 1

在子组件add-user-form中，当用户提交或编辑字段时，可以使用自定义事件。

我不知道您的子组件是什么样子，但是您可以这样做：

子组件

<label>
  Username:
  <input
    v-on:input="$emit('usernameChanged', $event.target.value)"
  >
</label>

父组件

<div v-if="operation.operationName=='addUser'">
  <add-user-form
    :module="module"
    :operation="operation"
    v-on:usernameChanged="validateUsername"
  >
  </add-user-form>
</div>

并添加一个方法validateUsername

methods:{
  validateUsername(value){
    //validate username
  }
}