快捷導(dǎo)航

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

更新時(shí)間：2024年07月25日 10:04:26 作者：噓噓乖乖

有時(shí)候我們需要對(duì)一個(gè)組件綁定自定義 v-model,以更方便地實(shí)現(xiàn)雙向數(shù)據(jù),例如自定義表單輸入控件,這篇文章主要介紹了vue 2 實(shí)現(xiàn)自定義組件一到多個(gè)v-model雙向數(shù)據(jù)綁定的方法,需要的朋友可以參考下

前言

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

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

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

使用 model 實(shí)現(xiàn)

其實(shí) v-model 只是 value + change 的語法糖，監(jiān)聽輸入并觸發(fā)改變，因此只要實(shí)現(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: {
      // 這里的計(jì)算屬性使用了 getter、setter，可以簡(jiǎn)化代碼
      // 可參見鏈接 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>

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

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

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

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

用上面相似的例子，可以這樣來實(shí)現(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種要少，因?yàn)椴挥脤?model 屬性。只是比起 v-model，v-bind:value.sync 的寫法還是不那么“引人注目”

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

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

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

1.分開綁定

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

<!-- 父組件 -->
<template>
  <!-- 定義了兩個(gè)v-bind:xxx.sync來實(shí)現(xiàn)兩個(gè)雙向綁定 -->
  <ModalInput :value.sync="value" :show.sync="show" />
</template>
<script>
export default {
  data() {
    return {
      value: '',
      show: false
    }
  }
}
</script>
<!-- 子組件 ModalInput -->
<template>
  <!-- 這里假設(shè)Modal是一個(gè)帶“確認(rèn)”按鈕，點(diǎn)擊觸發(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: ''        // 在這個(gè)例子中，使用 data 來聲明 input，
                  // 因?yàn)橹挥性邳c(diǎn)擊了“確認(rèn)”按鈕后，才要把值傳給父組件（而不是實(shí)時(shí)傳）
    }
  },
  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.合并綁定

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

<!-- 父組件 -->
<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>
// 與上面例子實(shí)現(xiàn)方式相似，這里省略代碼若干行。。。
// 其實(shí)就是聲明入?yún)?props 有哪些
// 用 computed 來聲明各個(gè)變量的 getter 和 setter
// getter 返回傳進(jìn)來的 prop，setter 中觸發(fā) update:xxxx 事件
</script>

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

您可能感興趣的文章: