示例（演示地址）
文章來源地址http://www.zghlxwxcb.cn/news/detail-803122.html
以下是Vue3中使用v-model實現組件的雙向數據綁定的示例代碼：
- 首先，讓我們來了解一下Vue3中v-model的用法。在Vue3中，v-model 指令可以用于自定義組件上，用于實現組件的雙向數據綁定。與Vue2中的 .sync 不同，Vue3中的v-model需要在組件中手動實現雙向綁定邏輯。
- 下面是一個簡單的父組件示例，展示了如何在Vue3中使用 v-model 來實現組件的雙向數據綁定：
<template>
<div>
<custom-input v-model="message"></custom-input>
<p>Message: {{ message }}</p>
</div>
</template>
<script>
import { ref } from 'vue';
import CustomInput from './CustomInput.vue';
export default {
components: {
CustomInput,
},
setup() {
const message = ref('');
return {
message,
};
},
};
</script>
- 在上面的示例中，我們定義了一個父組件，并在其中使用了一個 自定義組件CustomInput。
我們使用 v-model指令將父組件的 message屬性綁定到CustomInput組件的modelValue屬性上。
這樣，當CustomInput組件的modelValue屬性發(fā)生變化時，父組件的message屬性也會相應地更新。
- 接下來，我們需要在CustomInput組件中手動實現雙向綁定邏輯。 下面是CustomInput組件的代碼：
<template>
<input :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
</template>
<script>
import { defineProps } from 'vue';
export default {
props: {
modelValue: {
type: String,
required: true,
},
},
emits: ['update:modelValue'],
};
</script>
- 在上面的代碼中，我們定義了一個自定義組件CustomInput，并在其中使用了一個input元素。我們使用:value屬性將父組件傳遞過來的modelValue屬性綁定到input元素的value屬性上。這樣，當父組件的message屬性發(fā)生變化時，CustomInput組件的modelValue屬性也會相應地更新。
- 同時，我們使用@input事件監(jiān)聽input元素的輸入事件，并使用$emit方法觸發(fā)一個名為update:modelValue的自定義事件，并將輸入框的值作為參數傳遞給父組件。這樣，當用戶在輸入框中輸入內容時，父組件的message屬性也會相應地更新。
- 最后，我們需要在父組件中引入CustomInput組件，并將其注冊為局部組件。這樣，我們就可以在父組件中使用v-model指令來實現組件的雙向數據綁定了。
- Vue3.js官方文檔 - 組件v-model（.sync）
- Vue3.js官方文檔 - 組件v-model 演示地址
文章來源：http://www.zghlxwxcb.cn/news/detail-803122.html
到了這里，關于組件v-model（.sync）記錄使用（vue3）的文章就介紹完了。如果您還想了解更多內容，請在右上角搜索TOY模板網以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網！
