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>。 範例：
<code class="vue"><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></code>2. v-model
v- model 指令綁定輸入元素值到setup 中的變數。 v-model 將雙向綁定輸入值和資料變數。 範例：
<code class="vue"><template>
<input v-model="inputText" />
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const inputText = ref('');
return { inputText };
}
};
</script></code>3. 自訂屬性
this.attributeName。 範例：
<code class="vue"><template>
<div :my-value="myValue"></div>
</template>
<script>
import { ref } from 'vue';
export default {
setup() {
const myValue = ref('');
return { myValue };
}
};
</script></code><code>console.log(this.myValue); // 输出从setup绑定的值</code>
以上是vue中怎麼綁定setup中的數據的詳細內容。更多資訊請關注PHP中文網其他相關文章！
