Vue 3: So erhalten und ändern Sie festgelegte Variablen in Komponentenfunktionen

Question

Betrachten Sie das folgende einfache Beispiel mit der Kompositions-API in Vue 3. Ich möchte eine Instanz von test in der Funktion einer Komponente verwenden.

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

Standard exportieren defineComponent({
  Name: 'Test',
  aufstellen(){
    let test = ref()
    
    onMounted(() => {
      etwas tun()
    })

    zurückkehren{
      prüfen,
      etwas tun
    }
  }
})

Funktion doSomething(){
  console.log(test) //<-- undefiniert
  console.log(this.test) //<-- undefiniert
}
</script>

Wie greife ich auf test innerhalb von doSomething() zu? Nach meinem Verständnis sollte alles, was von setup() zurückgegeben wird, in der gesamten Komponente verfügbar sein, genau wie das Attribut data()

Answer 1

你必须将ref作为参数传递

<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>

---

另一种方法：

// 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>