如何在页面中调用带函数/方法的组件？

Question

我的合作伙伴创建了一个登录页面，其中包含几个组件，如“电子邮件”、“密码”、“电话号码”、“登录按钮”和“忘记密码”。但是要求我将所有组件移动到'/ components‘文件夹下的新vue中。我只知道移动组件，但我不能使它起作用，因为方法是不可调用的。请帮帮忙。

原始登录页面：

<template>
  <div class="q-pa-md" style="width: 400px">

    <q-form
      @submit="onSubmit"
      @reset="onReset"
      class="q-gutter-md"
    >
      <!-- <q-input
        filled
        v-model="email"
        label="Your email *"
        lazy-rules
        :rules="[val => !!val || 'Email is missing', isValidEmail]"
      />

      <q-input
        filled
        type="password"
        v-model="password"
        label="Password *"
        hint="Password should be 8 characters"
        lazy-rules
        :rules="[
          val => val !== null && val !== '' || 'Please enter your password',
          val => val.length === 8 || 'Please enter a valid password'
        ]"
      />

      <q-input
        filled
        type="number"
        v-model="phone"
        label="Your phone number *"
        lazy-rules
        :rules="[
          val => val !== null && val !== '' || 'Please enter your phone number',
          val => val.length > 8 && val.length < 12 || 'Please enter a valid number'
        ]"
      />

      <div>
        <q-btn label="Login" type="submit" color="primary"/>
        <q-btn flat to="/user/requestpassword" label="Forgot Password?" type="submit"/>
      </div> -->
    </q-form>

  </div>
</template>

<script>
export default {
  data () {
    return {
      email: null,
      password: null,
      phone: null,
      accept: false
    }
  },

  methods: {
    isValidEmail (val) {
      const emailPattern = /^(?=[a-zA-Z0-9@._%+-]{6,254}$)[a-zA-Z0-9._%+-]{1,64}@(?:[a-zA-Z0-9-]{1,63}\.){1,8}[a-zA-Z]{2,63}$/
      return emailPattern.test(val) || 'Invalid email'
    },
    onSubmit () {
      if (this.accept !== true) {
        this.$q.notify({
          color: 'red-5',
          textColor: 'white',
          icon: 'warning'
        })
      } else {
        this.$q.notify({
          color: 'green-4',
          textColor: 'white',
          icon: 'cloud_done',
          message: 'Submitted'
        })
      }
      this.onReset()
    },

    onReset () {
      this.email = null
      this.password = null
      this.phone = null
      this.accept = false
    }
  }
}
</script>

新组件vue：

<template>
  <q-input
        filled
        v-model="email"
        label="Your email *"
        lazy-rules
        :rules="[val => !!val || 'Email is missing', isValidEmail]"
      />

    <q-input
        filled
        type="password"
        v-model="password"
        label="Password *"
        hint="Password should be 8 characters"
        lazy-rules
        :rules="[
          val => val !== null && val !== '' || 'Please enter your password',
          val => val.length === 8 || 'Please enter a valid password'
        ]"
      />

      <q-input
        filled
        type="number"
        v-model="phone"
        label="Your phone number *"
        lazy-rules
        :rules="[
          val => val !== null && val !== '' || 'Please enter your phone number',
          val => val.length > 8 && val.length < 12 || 'Please enter a valid number'
        ]"
      />

      <div>
        <q-btn label="Login" type="submit" color="primary"/>
        <q-btn flat to="/user/requestpassword" label="Forgot Password?" type="submit"/>
      </div>
</template>

<script>
export default {

}
</script>

Answer 1

<div id="parent">
  <child :delegate="delegateMethod" ref="child" />
</div>

<script>
import { ref } from "vue";
export default({
  setup() {
    const child = ref()

    const callChildMethod = () => {
      child.method();
    };

    const delegateMethod = () => {
      console.log("call from child");
    };
    
    return { delegateMethod };
  }
});
</script>

<div id="child">
  <p>child component</p>
  <button @click="responseToParent()">
</div>

<script>
export default({
  props: {
    delegate: {
      type: Function,
      default: () => {}
    }
  },
  setup(props) {
    const method = () => {
      console.log("call from parent");
    };
    const responseToParent = () => {
      props.delegate();
    };

    return { responseToParent };
  }
});
</script>

这是一个非常简单的例子。它在Vue中的父组件和子组件之间是这样工作的。