Vue 3: How to get and modify set variables in component functions
P粉463840170
2023-08-24 19:32:40
<p>Consider the following simple example using the composition API in Vue 3. I want to use an instance of <code>test</code> in a component's function. </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>How to access <code>test</code> inside <code>doSomething()</code>? My understanding is that anything returned by <code>setup()</code> should be available throughout the component, just like the <code>data()</code> attribute in the options API. </p>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You must pass
refas a 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>Another method:
// 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>