Vue 3: Bagaimana untuk mendapatkan dan mengubah suai set pembolehubah dalam fungsi komponen
P粉463840170
P粉463840170 2023-08-24 19:32:40
0
1
557
<p>Pertimbangkan contoh mudah berikut menggunakan API komposisi dalam Vue 3. Saya mahu menggunakan contoh <code>test</code> dalam fungsi komponen. </p> <pre class="brush:php;toolbar:false;"><script> import { defineComponent, ref, onMounted } daripada 'vue' eksport lalai defineComponent({ nama: 'Ujian', persediaan(){ biarkan ujian = ref() onMounted(() => { lakukan sesuatu() }) kembali{ ujian, lakukan sesuatu } } }) fungsi doSomething(){ console.log(ujian) //<-- tidak ditentukan console.log(this.test) //<-- undefined } </script></pre> <p>Bagaimana untuk mengakses <code>test</code> di dalam <code>doSomething()</code>? Pemahaman saya ialah apa-apa yang dikembalikan oleh <code>setup()</code> harus tersedia di seluruh komponen, sama seperti atribut <code>data()</code> </p>
P粉463840170
P粉463840170

membalas semua(1)
P粉506963842

Anda mesti lulus ref sebagai parameter

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

Kaedah lain:

// 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>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan