vue實作雙向綁定有哪幾種方法-前端問答-PHP中文網

vue實作雙向綁定有哪幾種方法

青灯夜游

發布： 2022-12-27 18:16:28

原創

10673 人瀏覽過

vue實作雙向綁定的方法：1、利用v-model指令實現綁定，自訂元件上的v-model相當於傳遞了modelValue prop並接收拋出的update:modelValue事件；2 、利用vue-better-sync插件實現綁定；3、利用v-bind.sync修飾符，語法「」。

vue實作雙向綁定有哪幾種方法

本教學操作環境：windows7系統、vue3版，DELL G3電腦。

Vue 實作雙向綁定的幾種方法

#1、v-model 指令

<childcomponent></childcomponent>

<!-- 是以下的简写: -->

<childcomponent></childcomponent>

登入後複製

如果要將屬性或事件名稱更改為其他名稱，則需要在ChildComponent 元件中新增model 選項：

<!-- ParentComponent.vue -->

<ChildComponent v-model="pageTitle" />

登入後複製

// ChildComponent.vue

export default {
  model: {
    prop: &#39;title&#39;,
    event: &#39;change&#39;
  },
  props: {
    // 这将允许 `value` 属性用于其他用途
    value: String,
    // 使用 `title` 代替 `value` 作为 model 的 prop
    title: {
      type: String,
      default: &#39;Default title&#39;
    }
  }
}

登入後複製

所以，在這個例子中v-model 是以下的簡寫：

<ChildComponent :title="pageTitle" @change="pageTitle = $event" />

登入後複製

在Vue 3.x 中，自訂元件上的v-model 相當於傳遞了modelValue prop 並接收拋出的update:modelValue 事件：

<ChildComponent v-model="pageTitle" />

<!-- 是以下的简写: -->

<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

登入後複製

Vue3 可以綁定多個v-model, 例如：<ChildComponent v-model:title="pageTitle" v -model:name="pageName" />

##2、vue-better-sync 外掛程式

有需求如此：開發一個Prompt 元件，要求同步使用者的輸入，點選按鈕可關閉彈跳窗。

vue實作雙向綁定有哪幾種方法

一般我們會這樣做：

<template>
  <div v-show="_visible">
    <div>完善个人信息</div>
    <div>
      <div>尊姓大名？</div>
      <input v-model="_answer" />
    </div>
    <div>
      <button @click="_visible = !_visible">确认</button>
      <button @click="_visible = !_visible">取消</button>
    </div>
  </div>
</template>

<script>
export default {
  name: &#39;prompt&#39;,
  
  props: {
    answer: String,
    visible: Boolean
  },
  
  computed: {
    _answer: {
      get() {
        return this.answer
      },
      set(value) {
        this.$emit(&#39;input&#39;, value)
      }
    },
    _visible: {
      get() {
        return this.visible
      },
      set(value) {
        this.$emit(&#39;update:visible&#39;, value)
      }
    }
  }
}
</script>

登入後複製

寫一兩個元件還好，元件規模一旦擴大，寫雙向綁定真能寫出毛病來。於是，為了解放生產力，有了 vue-better-sync 這個輪子，並且看用它如何改造我們的Prompt 組件：

<template>
  <div v-show="actualVisible">
    <div>完善个人信息</div>
    <div>
      <div>尊姓大名？</div>
      <input v-model="actualAnswer" />
    </div>
    <div>
      <button @click="syncVisible(!actualVisible)">确认</button>
      <button @click="syncVisible(!actualVisible)">取消</button>
    </div>
  </div>
</template>

<script>
import VueBetterSync from &#39;vue-better-sync&#39;

export default {
  name: &#39;prompt&#39;,
  
  mixins: [
    VueBetterSync({
      prop: &#39;answer&#39;, // 设置 v-model 的 prop
      event: &#39;input&#39; // 设置 v-model 的 event
    })
  ],
  
  props: {
    answer: String,
    visible: {
      type: Boolean,
      sync: true // visible 属性可用 .sync 双向绑定
    }
  }
}
</script>

登入後複製

vue-better-sync 統一了v-model 和.sync 傳遞數據的方式，你只需this.actual${PropName} = newValue 或this.sync${PropName}(newValue) 即可將新資料傳遞給父元件。

GitHub：

fjc0k/vue-better-sync

#3、使用v-bind.sync修飾符

#在在某些情況下，我們可能需要對某一個

prop 進行「雙向綁定」(除了前面用v-model 綁定prop 的情況)。為此，我們建議使用 update:myPropName 拋出事件。例如，對於在上一個範例中帶有title prop 的ChildComponent，我們可以透過下面的方式將指派新value 的意圖傳達給父級：

this.$emit(&#39;update:title&#39;, newValue)

登入後複製

如果需要的話，父級可以監聽該事件並更新本地data property。例如：

<ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

登入後複製

為了方便起見，我們可以使用.sync 修飾符來縮寫，如下所示：

<ChildComponent :title.sync="pageTitle" />

登入後複製

vue3 移除
.sync

#【相關推薦：

vuejs影片教學、web前端開發】

以上是vue實作雙向綁定有哪幾種方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！