欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue 2 實現(xiàn)自定義組件一到多個v-model雙向數(shù)據(jù)綁定的方法(最新推薦)

 更新時間：2024年07月25日 10:04:26   作者：噓噓乖乖  
有時候我們需要對一個組件綁定自定義 v-model,以更方便地實現(xiàn)雙向數(shù)據(jù),例如自定義表單輸入控件,這篇文章主要介紹了vue 2 實現(xiàn)自定義組件一到多個v-model雙向數(shù)據(jù)綁定的方法,需要的朋友可以參考下

前言

有時候我們需要對一個組件綁定自定義 v-model，以更方便地實現(xiàn)雙向數(shù)據(jù)，例如自定義表單輸入控件。

甚至有時候，我們想要實現(xiàn)綁定多個 “v-model”，也就是多個“雙向綁定”，例如帶表單輸入的模塊框，想同時控制模態(tài)框的顯示狀態(tài)與表單的輸入狀態(tài)。好在 vue 3 已經(jīng)實現(xiàn)了多 v-model，那么在 vue 2 上我們可以如下實現(xiàn)。

1.單個“雙向綁定”的實現(xiàn)

使用 model 實現(xiàn)

其實 v-model 只是 value + change 的語法糖，監(jiān)聽輸入并觸發(fā)改變，因此只要實現(xiàn) “監(jiān)聽” + “觸發(fā)” 就可以自定義 v-model 啦。

<!-- 父組件 -->
<template>
    <Child v-model="value" />
</template>
<script>
export default {
  data() {
    return {
      value: ''
    }
  }
}
</script>
<!-- 子組件 -->
<template>
    <input v-model="input" />
</template>
<script>
export default {
  props: {
    value: String,
  },
  model: {
    prop: 'value',        // 指定 v-model 要綁定的參數(shù)叫什么名字，來自于 props 中定義的參數(shù)
    event: 'change',    // 指定要觸發(fā)的事件名字，將被用于 $emit
  },
  computed: {
    input: {
      // 這里的計算屬性使用了 getter、setter，可以簡化代碼
      // 可參見鏈接 https://cn.vuejs.org/v2/guide/computed.html#%E8%AE%A1%E7%AE%97%E5%B1%9E%E6%80%A7%E7%9A%84-setter
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('change', val);    // 觸發(fā)
      }
    }
  }
}
</script>

這樣一來，就實現(xiàn)了自定義組件的 v-model 實現(xiàn)，重點在于子組件中 model 的聲明和 emit 事件。

2.使用 .sync 實現(xiàn)

除了上面 model 的方法，其實還可以通過 sync 來實現(xiàn)。同樣也是處理“監(jiān)聽”和“觸發(fā)”就行。

在官方文檔中有寫，https://cn.vuejs.org/v2/guide/components-custom-events.html#sync-修飾符 

用上面相似的例子，可以這樣來實現(xiàn)：

<!-- 父組件 -->
<template>
    <Child :value.sync="value" />
</template>
<script>
export default {
  data() {
    return {
      value: ''
    }
  }
}
</script>
<!-- 子組件 Child -->
<template>
    <input v-model="input" />
</template>
<script>
export default {
  props: {
    value: String,
  },
  computed: {
    input: {
      get() {
        return this.value;
      },
      set(val) {
        this.$emit('update:value', val);    // 這里的事件名字一定是 'update:' + prop的名字
      }
    }
  }
}
</script>

很顯然，使用這種方法的代碼量比第1種要少，因為不用寫 model 屬性。只是比起 v-model，v-bind:value.sync 的寫法還是不那么“引人注目”

多個“雙向綁定”的實現(xiàn)

在 vue 3 出來之前，我們知道在一個標簽里面最多只能有一個 v-model。但這并不意味著一個組件只能一次雙向數(shù)據(jù)綁定。

根據(jù)上面 .sync 的方法，我們可以舉一反三，多幾個 update:xxxx 就可以了。

1.分開綁定

下面以一個帶輸入框的模態(tài)框為例子，需求是父組件能夠打開模態(tài)框，子組件在輸入確認后能夠關(guān)閉模態(tài)框；子組件能夠輸入，確認后能夠?qū)⒅祩鹘o父組件。

<!-- 父組件 -->
<template>
  <!-- 定義了兩個v-bind:xxx.sync來實現(xiàn)兩個雙向綁定 -->
  <ModalInput :value.sync="value" :show.sync="show" />
</template>
<script>
export default {
  data() {
    return {
      value: '',
      show: false
    }
  }
}
</script>
<!-- 子組件 ModalInput -->
<template>
  <!-- 這里假設(shè)Modal是一個帶“確認”按鈕，點擊觸發(fā)confirm事件，并利用v-model來控制展示的模態(tài)框 -->
  <Modal v-model="showModal" @confirm="onConfirm">
    <input v-model="input">
  </Modal>
</template>
<script>
export default {
  props: {
    value: String,
    show: Boolean,
  },
  data() {
    return {
      input: ''        // 在這個例子中，使用 data 來聲明 input，
                  // 因為只有在點擊了“確認”按鈕后，才要把值傳給父組件（而不是實時傳）
    }
  },
  computed: {
    showModal: {
      get() {
        return this.show;
      },
      set(val) {
        this.$emit('update:show', val);
      }
    }
  },
  methods: {
    onConfirm() {
      this.$emit('update:value', this.input);
      this.showModal = false
    }
  }
}
</script>

2.合并綁定

上面是綁定了兩個獨立變量的雙向綁定，按照官方的文檔，我們甚至還可以用 v-bind.sync 來綁定整個對象（的所有成員！）。下面假設(shè)一個表單組件，同時收集個人多個信息

<!-- 父組件 -->
<template>
  <UserInfoForm v-bind.sync="inputs" />
</template>
<script>
export default {
  data() {
    return {
      inputs: {
        name: '',
        age: 0,
        addr: '',
        phone: ''
      }
    }
  }
}
</script>
<!-- 子組件 UserInfoForm -->
<template>
  <form>
    <input v-model="name">
    <input v-model.number="age">
    <input v-model="addr">
    <input v-model="phone">
  </form>
</template>
<script>
// 與上面例子實現(xiàn)方式相似，這里省略代碼若干行。。。
// 其實就是聲明入?yún)?props 有哪些
// 用 computed 來聲明各個變量的 getter 和 setter
// getter 返回傳進來的 prop，setter 中觸發(fā) update:xxxx 事件
</script>

到此這篇關(guān)于vue 2 實現(xiàn)自定義組件一到多個v-model雙向數(shù)據(jù)綁定的方法（轉(zhuǎn)）的文章就介紹到這了,更多相關(guān)vue 2 v-model雙向數(shù)據(jù)綁定內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評論