Vue 3.0 中怎么實(shí)現(xiàn)雙向綁定

本篇文章為大家展示了Vue 3.0 中怎么實(shí)現(xiàn)雙向綁定，內(nèi)容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細(xì)介紹希望你能有所收獲。

雙向綁定由兩個(gè)單向綁定組成：

• 模型 —> 視圖數(shù)據(jù)綁定;

• 視圖 —> 模型事件綁定。

在 Vue 中 :value 實(shí)現(xiàn)了 模型到視圖 的數(shù)據(jù)綁定，@event 實(shí)現(xiàn)了 視圖到模型 的事件綁定：

<input :value="searchText" @input="searchText = $event.target.value" />

而在表單中，通過使用內(nèi)置的 v-model 指令，我們可以輕松地實(shí)現(xiàn)雙向綁定，比如  。介紹完上面的內(nèi)容，接下來阿寶哥將以一個(gè)簡單的示例為切入點(diǎn)，帶大家一起一步步揭開雙向綁定背后的秘密。

<div id="app">    <input v-model="searchText" />    <p>搜索的內(nèi)容：{{searchText}}</p> </div> <script>    const { createApp } = Vue    const app = Vue.createApp({      data() {        return {          searchText: "阿寶哥"        }      }    })    app.mount('#app') </script>

在以上示例中，我們在 input 搜索輸入框中應(yīng)用了 v-model 指令，當(dāng)輸入框的內(nèi)容發(fā)生變化時(shí)，p 標(biāo)簽中內(nèi)容會同步更新。

要揭開 v-model 指令背后的秘密，我們可以利用 Vue 3 Template Explorer 在線工具，來看一下模板編譯后的結(jié)果：

<input v-model="searchText" />  const _Vue = Vue return function render(_ctx, _cache, $props, $setup, $data, $options) {   with (_ctx) {     const { vModelText: _vModelText, createVNode: _createVNode,        withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue      return _withDirectives((_openBlock(), _createBlock("input", {       "onUpdate:modelValue": $event => (searchText = $event)     }, null, 8 /* PROPS */, ["onUpdate:modelValue"])),      [        [_vModelText, searchText]      ])   } }

在 模板生成的渲染函數(shù)中，我們看到了 Vue 3.0 進(jìn)階之指令探秘 文章中介紹的 withDirectives 函數(shù)，該函數(shù)用于把指令信息添加到  VNode 對象上，它被定義在 runtime-core/src/directives.ts 文件中：

// packages/runtime-core/src/directives.ts export function withDirectives<T extends VNode>(   vnode: T,   directives: DirectiveArguments ): T {   const internalInstance = currentRenderingInstance   // 省略部分代碼   const instance = internalInstance.proxy   const bindings: DirectiveBinding[] = vnode.dirs || (vnode.dirs = [])   for (let i = 0; i < directives.length; i++) {     let [dir, value, arg, modifiers = EMPTY_OBJ] = directives[i]     // 在 mounted 和 updated 時(shí)，觸發(fā)相同行為，而不關(guān)系其他的鉤子函數(shù)     if (isFunction(dir)) { // 處理函數(shù)類型指令       dir = {         mounted: dir,         updated: dir       } as ObjectDirective     }     bindings.push({ // 把指令信息保存到vnode.dirs數(shù)組中       dir, instance, value,        oldValue: void 0, arg, modifiers     })   }   return vnode }

除此之外，在模板生成的渲染函數(shù)中，我們看到了 vModelText 指令，通過它的名稱，我們猜測該指令與模型相關(guān)，所以我們先來分析 vModelText  指令。

一、vModelText 指令

vModelText 指令是 ObjectDirective 類型的指令，該指令中定義了 3 個(gè)鉤子函數(shù)：

• created：在綁定元素的屬性或事件監(jiān)聽器被應(yīng)用之前調(diào)用。

• mounted：在綁定元素的父組件被掛載后調(diào)用。

• beforeUpdate：在更新包含組件的 VNode 之前調(diào)用。

// packages/runtime-dom/src/directives/vModel.ts type ModelDirective<T> = ObjectDirective<T & { _assign: AssignerFn }>  export const vModelText: ModelDirective<   HTMLInputElement | HTMLTextAreaElement > = {   created(el, { modifiers: { lazy, trim, number } }, vnode) {     // ...   },   mounted(el, { value }) {     // ..   },   beforeUpdate(el, { value, modifiers: { trim, number } }, vnode) {     // ..   } }

接下來，阿寶哥將逐一分析每個(gè)鉤子函數(shù)，這里先從 created 鉤子函數(shù)開始。

1.1 created 鉤子

// packages/runtime-dom/src/directives/vModel.ts export const vModelText: ModelDirective<   HTMLInputElement | HTMLTextAreaElement > = {   created(el, { modifiers: { lazy, trim, number } }, vnode) {     el._assign = getModelAssigner(vnode)     const castToNumber = number || el.type === 'number' // 是否轉(zhuǎn)為數(shù)值類型     // 若使用 lazy 修飾符，則在 change 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步     addEventListener(el, lazy ? 'change' : 'input', e => {        if ((e.target as any).composing) return // 組合輸入進(jìn)行中       let domValue: string | number = el.value       if (trim) { // 自動(dòng)過濾用戶輸入的首尾空白字符         domValue = domValue.trim()       } else if (castToNumber) { // 自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類型         domValue = toNumber(domValue)       }       el._assign(domValue) // 更新模型     })     if (trim) {       addEventListener(el, 'change', () => {         el.value = el.value.trim()       })     }     if (!lazy) {       addEventListener(el, 'compositionstart', onCompositionStart)       addEventListener(el, 'compositionend', onCompositionEnd)       // Safari < 10.2 & UIWebView doesn't fire compositionend when       // switching focus before confirming composition choice       // this also fixes the issue where some browsers e.g. iOS Chrome       // fires "change" instead of "input" on autocomplete.       addEventListener(el, 'change', onCompositionEnd)     }   }, }

對于 created 方法來說，它會通過解構(gòu)的方式獲取 v-model 指令上添加的修飾符，在 v-model 上可以添加 .lazy、.number 和  .trim 修飾符。這里我們簡單介紹一下 3 種修飾符的作用：

• .lazy 修飾符：在默認(rèn)情況下，v-model 在每次 input 事件觸發(fā)后將輸入框的值與數(shù)據(jù)進(jìn)行同步。你可以添加 lazy 修飾符，從而轉(zhuǎn)為在  change 事件之后進(jìn)行同步。

<!-- 在 change 時(shí)而非 input 時(shí)更新 --> <input v-model.lazy="msg" />

• .number 修飾符：如果想自動(dòng)將用戶的輸入值轉(zhuǎn)為數(shù)值類型，可以給 v-model 添加 number 修飾符。這通常很有用，因?yàn)榧词乖? type="number" 時(shí)，HTML 輸入元素的值也總會返回字符串。如果這個(gè)值無法被 parseFloat() 解析，則會返回原始的值。

<input v-model.number="age" type="number" />

• .trim 修飾符：如果要自動(dòng)過濾用戶輸入的首尾空白字符，可以給 v-model 添加 trim 修飾符。

<input v-model.trim="msg" />

而在 created 方法內(nèi)部，會通過 getModelAssigner 函數(shù)獲取 ModelAssigner，從而用于更新模型對象。

// packages/runtime-dom/src/directives/vModel.ts const getModelAssigner = (vnode: VNode): AssignerFn => {   const fn = vnode.props!['onUpdate:modelValue']   return isArray(fn) ? value => invokeArrayFns(fn, value) : fn }

對于我們的示例來說，通過 getModelAssigner 函數(shù)獲取的 ModelAssigner 對象是 $event =>  (searchText = $event) 函數(shù)。在獲取 ModelAssigner 對象之后，我們就可以更新模型的值了。created  方法中的其他代碼相對比較簡單，阿寶哥就不詳細(xì)介紹了。這里我們來介紹一下 compositionstart 和 compositionend 事件。

中文、日文、韓文等需要借助輸入法組合輸入，即使是英文，也可以利用組合輸入進(jìn)行選詞等操作。在一些實(shí)際場景中，我們希望等用戶組合輸入完的一段文字才進(jìn)行對應(yīng)操作，而不是每輸入一個(gè)字母，就執(zhí)行相關(guān)操作。

比如，在關(guān)鍵字搜索場景中，等用戶完整輸入 阿寶哥 之后再執(zhí)行搜索操作，而不是輸入字母 a 之后就開始搜索。要實(shí)現(xiàn)這個(gè)功能，我們就需要借助  compositionstart 和 compositionend 事件。另外，需要注意的是，compositionstart 事件發(fā)生在 input  事件之前，因此利用它可以優(yōu)化中文輸入的體驗(yàn)。

了解完 compositionstart(組合輸入開始) 和 compositionend (組合輸入結(jié)束)事件，我們再來看一下  onCompositionStart 和 onCompositionEnd 這兩個(gè)事件處理器：

function onCompositionStart(e: Event) {   ;(e.target as any).composing = true }  function onCompositionEnd(e: Event) {   const target = e.target as any   if (target.composing) {      target.composing = false     trigger(target, 'input')   } }  // 觸發(fā)元素上的指定事件 function trigger(el: HTMLElement, type: string) {   const e = document.createEvent('HTMLEvents')   e.initEvent(type, true, true)   el.dispatchEvent(e) }

當(dāng)組合輸入時(shí)，在 onCompositionStart 事件處理器中，會 e.target 對象上添加 composing 屬性并設(shè)置該屬性的值為  true。而在 change 事件或 input 事件回調(diào)函數(shù)中，如果發(fā)現(xiàn) e.target 對象的 composing 屬性為 true  則會直接返回。當(dāng)組合輸入完成后，在 onCompositionEnd 事件處理器中，會把 target.composing 的值設(shè)置為 false 并手動(dòng)觸發(fā)  input 事件：

// packages/runtime-dom/src/directives/vModel.ts export const vModelText: ModelDirective<   HTMLInputElement | HTMLTextAreaElement > = {   created(el, { modifiers: { lazy, trim, number } }, vnode) {     // 省略部分代碼     addEventListener(el, lazy ? 'change' : 'input', e => {       if ((e.target as any).composing) return      // ...     })   }, }

好的，created 鉤子函數(shù)就分析到這里，接下來我們來分析 mounted 鉤子。

1.2 mounted 鉤子

// packages/runtime-dom/src/directives/vModel.ts export const vModelText: ModelDirective<   HTMLInputElement | HTMLTextAreaElement > = {   // set value on mounted so it's after min/max for type="range"   mounted(el, { value }) {     el.value = value == null ? '' : value   }, }

mounted 鉤子的邏輯很簡單，如果 value 值為 null 時(shí)，把元素的值設(shè)置為空字符串，否則直接使用 value 的值。

1.3 beforeUpdate 鉤子

// packages/runtime-dom/src/directives/vModel.ts export const vModelText: ModelDirective<   HTMLInputElement | HTMLTextAreaElement > = {   beforeUpdate(el, { value, modifiers: { trim, number } }, vnode) {     el._assign = getModelAssigner(vnode)     // avoid clearing unresolved text. #2302     if ((el as any).composing) return     if (document.activeElement === el) {       if (trim && el.value.trim() === value) {         return       }       if ((number || el.type === 'number') && toNumber(el.value) === value) {         return       }     }     const newValue = value == null ? '' : value     if (el.value !== newValue) { // 新舊值不相等時(shí)，執(zhí)行更新操作       el.value = newValue     }   } }

相信使用過 Vue 的小伙伴都知道，v-model 指令不僅可以應(yīng)用在 input 和 textarea  元素上，在復(fù)選框(Checkbox)、單選框(Radio)和選擇框(Select)上也可以使用 v-model 指令。不過需要注意的是，雖然這些元素上都是使用  v-model 指令，但實(shí)際上對于復(fù)選框、單選框和選擇框來說，它們是由不同的指令來完成對應(yīng)的功能。這里我們以單選框?yàn)槔?，來看一下?yīng)用 v-model  指令后，模板編譯的結(jié)果：

<input type="radio" value="One" v-model="picked" />  const _Vue = Vue return function render(_ctx, _cache, $props, $setup, $data, $options) {   with (_ctx) {     const { vModelRadio: _vModelRadio, createVNode: _createVNode,        withDirectives: _withDirectives, openBlock: _openBlock, createBlock: _createBlock } = _Vue      return _withDirectives((_openBlock(), _createBlock("input", {       type: "radio",       value: "One",       "onUpdate:modelValue": $event => (picked = $event)     }, null, 8 /* PROPS */, ["onUpdate:modelValue"])), [       [_vModelRadio, picked]     ])   } }

由以上代碼可知，在單選框應(yīng)用 v-model 指令后，雙向綁定的功能會交給 vModelRadio 指令來實(shí)現(xiàn)。除了 vModelRadio 之外，還有  vModelSelect 和 vModelCheckbox 指令，它們被定義在 runtime-dom/src/directives/vModel.ts  文件中，感興趣的小伙伴可以自行研究一下。

其實(shí) v-model 本質(zhì)上是語法糖。它負(fù)責(zé)監(jiān)聽用戶的輸入事件來更新數(shù)據(jù)，并在某些場景下進(jìn)行一些特殊處理。需要注意的是 v-model  會忽略所有表單元素的 value、checked、selected attribute 的初始值而總是將當(dāng)前活動(dòng)實(shí)例的數(shù)據(jù)作為數(shù)據(jù)來源。你應(yīng)該通過在組件的  data 選項(xiàng)中聲明初始值。

此外，v-model 在內(nèi)部為不同的輸入元素使用不同的 property 并拋出不同的事件：

• text 和 textarea 元素使用 value property 和 input 事件;

• checkbox 和 radio 元素使用 check property 和 change 事件;

• select 元素將 value 作為 prop 并將 change 作為事件。

這里你已經(jīng)知道，可以用 v-model 指令在表單 <input>、<textarea> 及 <select> 元素上創(chuàng)建雙向數(shù)據(jù)綁定。但如果你也想在組件上使用 v-model 指令來創(chuàng)建雙向數(shù)據(jù)綁定，那應(yīng)該如何實(shí)現(xiàn)呢？

二、在組件上使用 v-model

假設(shè)你想定義一個(gè) custom-input 組件并在該組件上使用 v-model 指令來實(shí)現(xiàn)雙向綁定，在實(shí)現(xiàn)該功能前，我們先利用 Vue 3 Template Explorer 在線工具，看一下模板編譯后的結(jié)果：

<custom-input v-model="searchText"></custom-input>  const _Vue = Vue return function render(_ctx, _cache, $props, $setup, $data, $options) {   with (_ctx) {     const { resolveComponent: _resolveComponent, createVNode: _createVNode,        openBlock: _openBlock, createBlock: _createBlock } = _Vue      const _component_custom_input = _resolveComponent("custom-input")     return (_openBlock(), _createBlock(_component_custom_input, {       modelValue: searchText,       "onUpdate:modelValue": $event => (searchText = $event)     }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))   } }

通過觀察以上的渲染函數(shù)，我們可知在 custom-input 組件上應(yīng)用了 v-model 指令，經(jīng)過編譯器編譯之后，會生成一個(gè)名為 modelValue 的輸入屬性和一個(gè)名為 update:modelValue 的自定義事件名。如果你對自定義事件內(nèi)部原理還不清楚的話，可以閱讀 Vue 3.0 進(jìn)階之自定義事件探秘 這篇文章。了解完這些內(nèi)容之后，我們就可以開始實(shí)現(xiàn) custom-input 組件了：

<div id="app">    <custom-input v-model="searchText"></custom-input>    <p>搜索的內(nèi)容：{{searchText}}</p> </div> <script>    const { createApp } = Vue    const app = Vue.createApp({      data() {        return {          searchText: "阿寶哥"        }      }     })    app.component('custom-input', {      props: ['modelValue'],      emits: ['update:modelValue'],      template: `        <input type="text"            :value="modelValue"           @input="$emit('update:modelValue', $event.target.value)"        >`    })    app.mount('#app') </script>

在自定義組件中實(shí)現(xiàn)雙向綁定的功能，除了使用自定義事件之外，還可以使用計(jì)算屬性的功能來定義 getter 和 setter。這里阿寶哥就不展開介紹了，感興趣的小伙伴可以閱讀 Vue 3 官網(wǎng) - 組件基礎(chǔ) 的相關(guān)內(nèi)容。

三、阿寶哥有話說

3.1 如何修改 v-model 默認(rèn)的 prop 名和事件名？

默認(rèn)情況下，組件上的 v-model 使用 modelValue 作為 prop 和 update:modelValue 作為事件。我們可以通過向 v-model 指令傳遞參數(shù)來修改這些名稱：

<custom-input v-model:name="searchText"></custom-input>

以上的模板，經(jīng)過編譯器編譯后的結(jié)果如下：

const _Vue = Vue return function render(_ctx, _cache, $props, $setup, $data, $options) {   with (_ctx) {     const { resolveComponent: _resolveComponent, createVNode: _createVNode,        openBlock: _openBlock, createBlock: _createBlock } = _Vue      const _component_custom_input = _resolveComponent("custom-input")     return (_openBlock(), _createBlock(_component_custom_input, {       name: searchText,       "onUpdate:name": $event => (searchText = $event)     }, null, 8 /* PROPS */, ["name", "onUpdate:name"]))   } }

通過觀察生成的渲染函數(shù)，我們可知自定義 custom-input 組件接收一個(gè) name 輸入屬性并含有一個(gè)名為 update:name 的自定義事件：

app.component('custom-input', {   props: {     name: String   },   emits: ['update:name'],   template: `     <input type="text"       :value="name"       @input="$emit('update:name', $event.target.value)">   ` })

至于自定義的事件名為什么是 "onUpdate:name" 這種形式，你可以從 Vue 3.0 進(jìn)階之自定義事件探秘 這篇文章中介紹的 emit 函數(shù)中找到對應(yīng)的答案。

3.2 能否在組件上使用多個(gè) v-model 指令？

在某些場景下，我們是希望在組件上使用多個(gè) v-model 指令，每個(gè)指令與不同的數(shù)據(jù)做綁定。比如一個(gè) user-name 組件，該組件允許用戶輸入 firstName 和 lastName。該組件期望的使用方式如下：

<user-name   v-model:first-name="firstName"   v-model:last-name="lastName" ></user-name>

同樣，我們使用 Vue 3 Template Explorer 在線工具，先來看一下以上模板編譯后的結(jié)果：

const _Vue = Vue return function render(_ctx, _cache, $props, $setup, $data, $options) {   with (_ctx) {     const { resolveComponent: _resolveComponent, createVNode: _createVNode,        openBlock: _openBlock, createBlock: _createBlock } = _Vue      const _component_user_name = _resolveComponent("user-name")     return (_openBlock(), _createBlock(_component_user_name, {       "first-name": firstName,       "onUpdate:first-name": $event => (firstName = $event),       "last-name": lastName,       "onUpdate:last-name": $event => (lastName = $event)     }, null, 8 /* PROPS */, ["first-name", "onUpdate:first-name", "last-name", "onUpdate:last-name"]))   } }

通過觀察以上的輸出結(jié)果，我們可知 v-model:first-name 和 v-model:last-name 都會生成對應(yīng)的 prop 屬性和自定義事件。HTML 中的 attribute 名是大小寫不敏感的，所以瀏覽器會把所有大寫字符解釋為小寫字符。這意味著當(dāng)你使用 DOM 中的模板時(shí)，camelCase （駝峰命名法）的 prop 名需要使用其等價(jià)的 kebab-case（短橫線分隔命名）命名。比如：

<!-- kebab-case in HTML --> <blog-post post-title="hello!"></blog-post>  app.component('blog-post', {   props: ['postTitle'],   template: '<h4>{{ postTitle }}</h4>' })

反之，對于 first-name 和 last-name 屬性名來說，在定義 user-name 組件時(shí)，我們將使用 firstName 和 lastName 駝峰命名方式。

 <div id="app">     <user-name        v-model:first-name="firstName"        v-model:last-name="lastName">     </user-name>     Your name: {{firstName}} {{lastName}} </div> <script>    const { createApp } = Vue    const app = Vue.createApp({      data() {        return {          firstName: "",          lastName: ""        }      }    })    app.component('user-name', {      props: {        firstName: String,        lastName: String      },      emits: ['update:firstName', 'update:lastName'],      template: `        <input           type="text"           :value="firstName"           @input="$emit('update:firstName', $event.target.value)">        <input           type="text"           :value="lastName"           @input="$emit('update:lastName', $event.target.value)">       `    })    app.mount('#app') </script>

在以上的代碼中，user-name 組件使用的自定義屬性和事件名都是駝峰的形式。很明顯與模板編譯后生成的命名格式不一致，那么以上的 user-name 組件可以正常工作么？答案是可以的，這是因?yàn)閷τ谧远x事件來說，在 emit 函數(shù)內(nèi)部會通過 hyphenate 函數(shù)，把事件名從 camelCase（駝峰命名法）的形式轉(zhuǎn)換為 kebab-case（短橫線分隔命名）的形式，即 hyphenate(event)：

// packages/runtime-core/src/componentEmits.ts export function emit(   instance: ComponentInternalInstance,   event: string,   ...rawArgs: any[] ) {   // 省略部分代碼   // for v-model update:xxx events, also trigger kebab-case equivalent   // for props passed via kebab-case   if (!handler && isModelListener) {     handlerName = toHandlerKey(hyphenate(event))     handler = props[handlerName]   }    if (handler) {     callWithAsyncErrorHandling(       handler,       instance,       ErrorCodes.COMPONENT_EVENT_HANDLER,       args     )   } }

而 hyphenate 函數(shù)的實(shí)現(xiàn)也很簡單，具體如下所示：

// packages/shared/src/index.ts const hyphenateRE = /\B([A-Z])/g  // cacheStringFunction 函數(shù)提供了緩存功能 export const hyphenate = cacheStringFunction((str: string) =>   str.replace(hyphenateRE, '-$1').toLowerCase() )

3.3 如何為 v-model 添加自定義修飾符？

在前面阿寶哥已經(jīng)介紹了 v-model 的內(nèi)置修飾符：.trim、.number 和 .lazy。但在某些場景下，你可能希望自定義修飾符。在介紹如何自定義修飾符前，我們再次利用 Vue 3 Template Explorer 在線工具，看一下 v-model 使用內(nèi)置修飾符后，模板編譯的結(jié)果：

<custom-input v-model.lazy.number="searchText"></custom-input>  const _Vue = Vue return function render(_ctx, _cache, $props, $setup, $data, $options) {   with (_ctx) {     const { resolveComponent: _resolveComponent, createVNode: _createVNode,        openBlock: _openBlock, createBlock: _createBlock } = _Vue      const _component_custom_input = _resolveComponent("custom-input")     return (_openBlock(), _createBlock(_component_custom_input, {       modelValue: searchText,       "onUpdate:modelValue": $event => (searchText = $event),       modelModifiers: { lazy: true, number: true }     }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))   } }

通過觀察生成的渲染函數(shù)，我們可以看到 v-model 上添加的 .lazy 和 .number 修飾符，被編譯到 modelModifiers prop 屬性中。假設(shè)我們要為自定義一個(gè) capitalize 修飾符 ，該修飾符的作用是將 v-model 綁定字符串的第一個(gè)字母轉(zhuǎn)成大寫：

<custom-input v-model.capitalize="searchText"></custom-input>  const _Vue = Vue return function render(_ctx, _cache, $props, $setup, $data, $options) {   with (_ctx) {     const { resolveComponent: _resolveComponent, createVNode: _createVNode,        openBlock: _openBlock, createBlock: _createBlock } = _Vue      const _component_custom_input = _resolveComponent("custom-input")     return (_openBlock(), _createBlock(_component_custom_input, {       modelValue: searchText,       "onUpdate:modelValue": $event => (searchText = $event),       modelModifiers: { capitalize: true }     }, null, 8 /* PROPS */, ["modelValue", "onUpdate:modelValue"]))   } }

很明顯 v-model 上的 .capitalize 修飾符，也被編譯到 modelModifiers prop 屬性中。了解完這些，我們就可以實(shí)現(xiàn)上述的修飾符，具體如下所示：

<div id="app">    <custom-input v-model.capitalize="searchText"></custom-input>    <p>搜索的內(nèi)容：{{searchText}}</p> </div> <script>    const { createApp } = Vue    const app = Vue.createApp({      data() {        return {          searchText: ""        }      }    })    app.component('custom-input', {      props: {        modelValue: String,        modelModifiers: {          default: () => ({})        }      },      emits: ['update:modelValue'],      methods: {        emitValue(e) {          let value = e.target.value          if (this.modelModifiers.capitalize) {            value = value.charAt(0).toUpperCase() + value.slice(1)          }          this.$emit('update:modelValue', value)        }      },      template: `<input        type="text"        :value="modelValue"        @input="emitValue">`    })   app.mount('#app') </script>

上述內(nèi)容就是Vue 3.0 中怎么實(shí)現(xiàn)雙向綁定，你們學(xué)到知識或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識儲備，歡迎關(guān)注億速云行業(yè)資訊頻道。