vue3?封裝自定義組件v-model的示例
首先要注意 vue3中 v-model 默認綁定的變量名變了,從原理的 value 改成了 modelValue,
如果要改變變量的值,要執(zhí)行一個事件 this.$emit("update:modelValue", value);
<template> <div class="inline"> <input :type="password ? 'password' : 'text'" ref="input" @input="handleInput" @blur="handleBlur($event.target.value)" :placeholder="placeholder" /> </div> </template> <script> export default { name: "dg-Input", props: { type: { type: String, requided: true, }, placeholder: { type: String, }, password: { default: false, }, modelValue: [String, Number], }, data() { return {}; }, computed: { nativeInputValue() { return this.modelValue === null || this.modelValue === undefined ? "" : String(this.modelValue); }, }, methods: { handleInput(event) { let value = event.target.value; this.$emit("update:modelValue", value); this.$emit("input", value); this.$nextTick(this.setNativeInputValue); }, setNativeInputValue() { const input = this.$refs.input; if (input.value === this.nativeInputValue) return; input.value = this.nativeInputValue; }, }, mounted() { this.setNativeInputValue(); }, }; </script> <style lang="scss" scoped> .inline { display: inline-block; input { width: 100%; height: 100%; padding-left: 5px; } } </style>
補充:下面看下vue3中自定義組件使用v-model
vue2 中的v-model
v-model本質(zhì)上是一個語法糖,如下代碼
<input v-model="test"> <!--上面代碼本質(zhì)上就是下方代碼--> <input :value="test" @input="test = $event.target.value">
因此,對于一個帶有 v-model 的組件(核心用法),它應該如下:
帶有v-model的父組件通過綁定的value值(即v-model的綁定值)傳給子組件,子組件通過 prop接收一個 value;
子組件利用oninput事件實時通過 $emit 觸發(fā)父組件input 事件,并傳入新值value給父組件;
父組件
<template> <div> <child v-model="msg" @input="msg = $event.target.value" /> <!--<child :value="msg" @input="msg = $event.target.value" />--> </div> </template> <script> import child from './components/Child.vue' export default { components: { child }, data() { return { msg: '' } } } </script>
子組件child
<template> <input type="text" :value="modelValue" @input="handleInput"> </template> <script> export default { name: 'Child', props:['value'], data() { return { modelValue: this.value } }, methods: { handleInput(event) { this.$emit('input', event) } } }
vue3中的 v-model
vue3中的v-model默認綁定的不是value,而是modelValue,接收的方法由input改為@update:modelValue。
<template> <child v-model="msg" /> <p>{{msg}}</p> </template> <script lang="ts"> import { defineComponent,ref} from 'vue'; import child from './components/child/index.vue' export default defineComponent({ name: 'App', components:{ child }, setup(){ const msg = ref('1') return{ msg } } }); </script>
<template> <input type="text" :value="modelValue" @input="onInput"> </template> <script lang="ts"> import {defineComponent} from 'vue' export default defineComponent({ name:'ChildInput', props:{ modelValue:{ type:String } }, setup(props, context){ const onInput = (e: Event) =>{ context.emit('update:modelValue',e.target.value) } return{ onInput } } }) </script>
到此這篇關(guān)于vue3 封裝自定義組件v-model的文章就介紹到這了,更多相關(guān)vue3 自定義組件v-model內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue.js樣式動態(tài)綁定實現(xiàn)小結(jié)
這篇文章主要介紹了Vue.js樣式動態(tài)綁定實現(xiàn)小結(jié),小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2019-01-01Element?Plus的el-tree-select組件懶加載+數(shù)據(jù)回顯詳解
el-tree-select組件是el-tree和el-select的結(jié)合體,他們的原始屬性未被更改,下面這篇文章主要給大家介紹了關(guān)于Element?Plus的el-tree-select組件懶加載+數(shù)據(jù)回顯的相關(guān)資料,需要的朋友可以參考下2022-11-11