Vue 3: 如何在组件函数中获取和修改设置的变量-PHP中文网问答

文章专题 AI工具学习下载问答源码最近更新

PHP

会员中心讲师中心微信公众号

Vue 3: 如何在组件函数中获取和修改设置的变量

P粉463840170 2023-08-24 19:32:40

[Vue.js讨论组]

1027

<p>考虑以下使用Vue 3中的组合API的简单示例。我想在组件的函数中使用<code>test</code>的实例。</p> <pre class="brush:php;toolbar:false;"><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></pre> <p>如何在<code>doSomething()</code>内部访问<code>test</code>？我的理解是<code>setup()</code>返回的任何内容应该在整个组件中都可用，就像选项API中的<code>data()</code>属性一样。</p>

P粉463840170

全部回复(1)

P粉5069638422023-08-25 13:05:01 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>

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>