一、組件的v-model

前面我們在input中可以使用v-model來完成雙向綁定：

• 這個時候往往會非常方便，因為v-model默認幫助我們完成了兩件事；
• v-bind:value的數據綁定 和 @input的事件監聽；
  

如果我們現在封裝了一個組件，其他地方在使用這個組件時，是否也可以使用v-model來同時完成這兩個功能呢？

• 也是可以的，vue也支持在組件上使用v-model；

當我們在組件上使用的時候，等價于如下的操作：

• 我們會發現和input元素不同的只是屬性的名稱和事件觸發的名稱而已；

二、組件v-model的實現

那么，為了我們的MyInput組件可以正常的工作，這個組件內的 <input> 必須：

• 將其 value attribute 綁定到一個名叫 modelValue 的 prop 上；
• 在其 input 事件被觸發時，將新的值通過自定義的 update:modelValue 事件拋出；
  

三、computed實現

我們依然希望在組件內部按照雙向綁定的做法去完成，應該如何操作呢？我們可以使用計算屬性的setter和getter來完成。

四、綁定多個屬性

我們現在通過v-model是直接綁定了一個屬性，如果我們希望綁定多個屬性呢？ p也就是我們希望在一個組件上使用多個v-model是否可以實現呢？

• 我們知道，默認情況下的v-model其實是綁定了 modelValue 屬性和 @update:modelValue的事件；
• 如果我們希望綁定更多，可以給v-model傳入一個參數，那么這個參數的名稱就是我們綁定屬性的名稱；

注意：這里我是綁定了兩個屬性的

v-model:title相當于做了兩件事：

• 綁定了title屬性；
• 監聽了 @update:title的事件；
  

五、認識Mixin

目前我們是使用組件化的方式在開發整個Vue的應用程序，但是組件和組件之間有時候會存在相同的代碼邏輯，我們希望對相同的代碼邏輯進行抽取。

在Vue2和Vue3中都支持的一種方式就是使用Mixin來完成：

• Mixin提供了一種非常靈活的方式，來分發Vue組件中的可復用功能；
• 一個Mixin對象可以包含任何組件選項；
• 當組件使用Mixin對象時，所有Mixin對象的選項將被 混合 進入該組件本身的選項中；

六、Mixin的基本使用

七、Mixin的合并規則

如果Mixin對象中的選項和組件對象中的選項發生了沖突，那么Vue會如何操作呢？
p這里分成不同的情況來進行處理；
1.情況一：如果是data函數的返回值對象

• 返回值對象默認情況下會進行合并；
• 如果data返回值對象的屬性發生了沖突，那么會保留組件自身的數據；

2.情況二：如何生命周期鉤子函數

• 生命周期的鉤子函數會被合并到數組中，都會被調用；

3.情況三：值為對象的選項，例如 methods、components 和 directives，將被合并為同一個對象。

• 比如都有methods選項，并且都定義了方法，那么它們都會生效；
• 但是如果對象的key相同，那么會取組件對象的鍵值對；

八、全局混入Mixin

如果組件中的某些選項，是所有的組件都需要擁有的，那么這個時候我們可以使用全局的mixin：

• 全局的Mixin可以使用 應用app的方法 mixin 來完成注冊；
• 一旦注冊，那么全局混入的選項將會影響每一個組件

九、extends

另外一個類似于Mixin的方式是通過extends屬性： 允許聲明擴展另外一個組件，類似于Mixins；
在開發中extends用的非常少，在Vue2中比較推薦大家使用Mixin，而在Vue3中推薦使用Composition API

總結

以上是生活随笔為你收集整理的组件的v-model Mixin extends的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。