vue中ref函式的作用

ref 函數在 Vue.js 中用於建立可變引用，以便存取和修改元件實例或 DOM 元素。它可以在以下場景中發揮作用：1. 存取 DOM 元素；2. 存取元件實例；3. 存取元件屬性。

Vue.js 中ref 函數的作用

ref 函數在Vue.js 中是一個用於創建可變引用（mutable reference）的函數，允許存取和修改元件實例或DOM 元素。它在以下場景中非常有用：

1. 存取DOM 元素

在ref 函數中，可以傳遞一個字串或一個函數作為參數，表示要引用的DOM 元素，例如：

<code><template>
  <div ref="myDiv">...</div>
</template>

<script>
  export default {
    mounted() {
      console.log(this.$refs.myDiv); // 访问 DOM 元素
    }
  }
</script></code>

2. 存取元件實例

類似地，ref 函數也可以用來存取元件實例：

<code><template>
  <MyComponent ref="myComponent">...</MyComponent>
</template>

<script>
  export default {
    mounted() {
      console.log(this.$refs.myComponent); // 访问组件实例
    }
  }
</script></code>

3. 存取元件的屬性

ref 函數也可以用來存取元件的屬性：

<code><template>
  <MyComponent ref="myComponent" :title="title">...</MyComponent>
</template>

<script>
  export default {
    data() {
      return {</code>

以上是vue中ref函式的作用的詳細內容。更多資訊請關注PHP中文網其他相關文章！