Vue 3: 如何在组件函数中获取和修改设置的变量
<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>
1
1164
收藏
你必须将
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>