搜尋

首頁  >  問答  >  主體

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>
P粉463840170P粉463840170457 天前542

全部回覆(1)我來回復

  • P粉506963842

    P粉5069638422023-08-25 13:05:01

    你必須將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
  • 取消回覆