Início / coding / Perguntas / 77353136
Accepted
user414873
Asked: 2023-10-24 22:50:35 +0800 CST

Não é possível chamar o método do componente filho usando a exposição vue3

  • 772

Tento chamar um método em um componente filho como descrito aqui https://vuejs.org/api/composition-api-setup.html#exposing-public-properties

Observe que não estou usando <script setup>e defineExposeaqui.

componente filho

<script>
import { defineComponent } from 'vue';

export default defineComponent({
  name: 'Checklist',
  setup(props, { expose }) {
  
    const validateForm = () => {
      let ok = true;
      console.log("validate");
      return ok;
    }

    expose({ validate: validateForm });
  }
})
</script>

pai

<template>
  <div>
    <Checklist ref="checklistElm" />
    <q-btn @click="save">Save</q-btn>
  </div>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 'ChecklistPage',
  components: {
    Checklist
  },
  setup() {
    const checklistElm = ref(null);
    return {
      save() {
        let ok = checklistElm.validate();
        /* or
        let ok = checklistElm.value.validate(); */      
      }
    }
  }
})
</script>

Clicar em Salvar me dá

checklistElm.validate não é uma função

ou

checklistElm.value é nulo

como um erro. Não sei por que...

Embora eu esteja usando o Quasar aqui, isso se refere apenas a um vue.

vuejs3

1 respostas

  1. Best Answer

    Você precisa usar .value, mas também esqueceu de retornar checklistElmda função de configuração. Sem retornar, ele não é exposto ao modelo e, portanto, ref="checklistElm"não funciona de fato.

    return {
  checklistElm,
  save() {
    let ok = checklistElm.value.validate();
  }
}

    Este é um erro comum ao usar a setup()função. Para sua informação, menos código clichê e não ter que se lembrar de retornar as coisas é o motivo pelo qual <script setup>é a maneira recomendada de escrever componentes da API de composição.

    • 0

relate perguntas