vue中怎麼綁定setup中的數據

Vue 中綁定Setup 資料有三種方法：1. refs：使用ref 屬性將元素引用綁定到setup 變數；2. v-model：雙向綁定輸入元素值和setup 變數；3.自訂屬性：建立屬性並綁定到setup 變量，存取值使用this.attributeName。

Vue 中綁定Setup 資料

在Vue 中，使用setup()函數定義邏輯和元件狀態。為了將這些資料綁定到元件模板，可以使用以下方法：

1. refs

• 使用ref# 屬性將元素或元件引用綁定到setup 中的變數。
• 存取綁定的元素或元件，使用 this.$refs.<ref-name>。

範例：

<template>
  <input ref="myInput" />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const inputRef = ref(null);
    return { inputRef };
  },
  mounted() {
    console.log(this.$refs.myInput.value);
  }
};
</script>

2. v-model

• 使用v- model 指令綁定輸入元素值到setup 中的變數。
• v-model 將雙向綁定輸入值和資料變數。

範例：

<template>
  <input v-model="inputText" />
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const inputText = ref('');
    return { inputText };
  }
};
</script>

3. 自訂屬性

• 建立自訂屬性並將其綁定到setup 中的變數。
• 存取綁定的值，使用 this.attributeName。

範例：

<template>
  <div :my-value="myValue"></div>
</template>

<script>
import { ref } from 'vue';

export default {
  setup() {
    const myValue = ref('');
    return { myValue };
  }
};
</script>

<code>console.log(this.myValue); // 输出从setup绑定的值</code>

以上是vue中怎麼綁定setup中的數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！