Question

在Vue.js中，我创建了一个名为Password.vue的单个文件组件，其中包含两个密码字段以及相关的检查。

首先，我在<template></template>标签中定义了HTML，这可以正常工作。

然后，我将JavaScript代码定义如下：

<script>

    computed: {
        passwordsValid() {

           // Password checking code here
        }
    },

};
</script>

然后我有了一个注册功能，可以导入Password.vue：

import PasswordComponent from "../components/Password.vue";

然后在我的signup.html文件中，

<password-component></password-component>

使用实际的密码组件。

我的问题是，我的passwordsValid函数包含在Password.vue中，我无法从我的signup.html文件中访问它。

我该怎么做？换句话说，如何访问单个文件组件中的功能？

Answer 1

为Password.vue创建道具：

props: {
  requestCheckPassword: Boolean,
}

添加手表：

watch: {
  requestCheckPassword () {
    this.$emit('passwordResult', {isValid: this.passwordsValid})
    this.$emit('update:requestCheckPassword', false)
  }
}

然后在signup.html文件中：

<password-component @passwordResult="methodFromMethodsSection" :request-check-password.sync="requestCheckPassword"></password-component>

最后，在signup.html中添加：

data () {
  return {
    requestCheckPassword: false
  }
},
methods: {
  methodFromMethodsSection ({ isValid }) {
    // your logic, you can access isValid
  }
}

如果要获取密码检查结果，只需从数据中更改requestCheckPassword。例如：

<button @click="requestCheckPassword = true">Click me</button>

在Vue.js中，如何访问单个文件组件中的函数？

1 个答案: