Vue 3：如何访问组件函数中的设置变量

克利夫顿唇

考虑以下使用 Vue 3 中的组合 API 的简单示例。我试图test在我的组件的函数中提供一个可用的实例。

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

export default defineComponent({
  name: 'Test',
  setup(){
    let test = ref()
    
    onMounted(() => {
      doSomething()
    })

    return{
      test,
      doSomething
    }
  }
})

function doSomething(){
  console.log(test) //<-- undefined
  console.log(this.test) //<-- undefined
}
</script>

我如何进入test内部doSomething()？我的理解是返回的任何东西都setup()应该在整个组件中可用，就像data()来自选项 API的属性一样。

维特根斯坦

您必须将其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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。