Vue 3 : Comment obtenir et modifier des variables définies dans les fonctions de composants

Question

Considérez l'exemple simple suivant utilisant l'API de composition dans Vue 3. Je souhaite utiliser une instance de test dans la fonction d'un composant.

<script>
importer { définirComponent, ref, onMounted } depuis 'vue'

exporter le composant défini par défaut ({
  nom : 'Test',
  installation(){
    laissez test = ref()
    
    onMounted(() => {
      faire quelque chose()
    })

    retourner{
      test,
      faire quelque chose
    }
  }
})

fonction faireQuelque chose(){
  console.log(test) //<-- non défini
  console.log(this.test) //<-- non défini
}
</script>

Comment accéder à test dans doSomething() ? Je crois comprendre que tout ce qui est renvoyé par setup() devrait être disponible dans tout le composant, tout comme l'attribut data()

Answer 1

Vous devez passer ref en paramètre

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

export default defineComponent({
  name: 'Test',
  setup () {
    let test = ref(null)

    onMounted(() => {
      doSomething(test.value)
    })

    return {
      test,
      doSomething
    }
  }
})

function doSomething (param) {
  console.log(param); // null
}
</script>

---

Autre méthode :

// functions.js
import { ref } from 'vue'
export let test = ref(null)

// vue-file
<script>
import { defineComponent, ref, onMounted } from 'vue'
import { test } from '../utils/functions.js'

export default defineComponent({
  name: 'Test',
  setup () {

    onMounted(() => {
      doSomething(test)
    })

    return {
      test,
      doSomething
    }
  }
})

function doSomething (param) {
  console.log(test.value); // <-- instant access
  console.log(param.value); // <-- import via parameter
}
</script>