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

Question

考虑以下使用 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>

如何在 doSomething() 中访问 test？我的理解是 setup() 返回的任何内容都应该在整个组件中可用，就像选项 API.

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

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

Vue 3: How to Access Setup Variable in Component Function

javascript

vue.js

vuejs3

vue-composition-api

另一种方法：