Membawa anda memahami secara mendalam tentang v-model dalam vue2 dan lihat cara membuat komponen menyokong sintaks ini

Artikel ini akan membawa anda memahami model v dalam vue2, melihat sama ada model v mengikat dua hala atau aliran data sehala, dan cara menjadikan komponen yang anda bangunkan menyokong model v berguna kepada semua orang.

Baca artikel ini

Anda akan:

• Faham: Apakah v-model gula sintaksis? vue2 Apakah rawatan istimewa yang telah dilakukan kepada komponen asli?
• Ketahui: v-model Adakah ia aliran data sehala atau pengikatan data dua hala?
• Fikirkan: v-model Apakah "kesan sampingan" di luar gula sintaksis?
• Ketahui cara membuat komponen anda menyokong sintaks v-model.

1. Intipati v-model ialah gula sintaksis.

『v-model pada asasnya hanyalah gula sintaksis. Ia bertanggungjawab untuk mendengar peristiwa input pengguna untuk mengemas kini data dan melakukan beberapa pemprosesan khas untuk beberapa senario yang melampau. 』 --Dokumentasi rasmi. [Cadangan berkaitan: tutorial vue.js]

Apakah gula sintaksis?

Gula sintaksis, secara ringkasnya, adalah "penulisan yang mudah".

Dalam kebanyakan kes, v-model="foo" bersamaan dengan :value="foo" tambah @input="foo = $event";

<!-- 在大部分情况下，以下两种写法是等价的 -->
<el-input v-model="foo" />

<el-input :value="foo" @input="foo = $event" />

Ya, dalam kebanyakan kes Itu sahaja.

Tetapi terdapat pengecualian:

• vue2 menyediakan atribut model kepada komponen, membenarkan pengguna menyesuaikan nama prop bagi nilai lulus dan nama acara untuk mengemas kini nilai. Saya akan melangkau ini buat masa ini dan akan pergi ke butiran dalam Bahagian 4.

• Untuk elemen asli html, vue telah melakukan banyak "kerja kotor" untuk membuat kami mengabaikan perbezaan dalam API html. Kaedah penulisan kiri dan kanan unsur berikut adalah setara:

• textarea Elemen:

• select Kotak lungsur:

• input type='radio' Butang radio:

• input type='checkbox' Kotak berbilang pilihan:

Dalam pemikiran pengaturcaraan, cara membantu pengguna "menyembunyikan butiran" ini dipanggil enkapsulasi.

2. Adakah model v hanyalah gula sintaksis? (Trivia)

v-model Ia bukan sekadar gula sintaks, ia juga mempunyai kesan sampingan.

Kesan sampingan adalah seperti berikut: Jika v-model terikat pada sifat yang tidak wujud pada objek responsif, maka vue akan menambah sifat ini secara senyap-senyap dan menjadikannya responsif .

Sebagai contoh, lihat kod berikut:

// template中：
<el-input v-model="user.tel"></el-input>
// script中：
export default {
  data() {
    return {
      user: {
        name: &#39;公众号: 前端要摸鱼&#39;,
      }
    }
  }
}

Atribut user.tel tidak ditakrifkan dalam data responsif, tetapi template terikat dengan v-model user.tel, rasa apa yang berlaku apabila anda menaip?

Lihat kesannya:

Mari dedahkan jawapannya: user akan mempunyai atribut tel baharu dan tel atribut ini masih Responsif.

Ini adalah kesan "kesan sampingan", adakah anda telah mempelajarinya?

3 v-model Adakah ia mengikat dua hala atau aliran data sehala?

2.1 v-model Adakah ia mengikat dua hala?

Ya, ia rasmi.

『Anda boleh menggunakan arahan model-v untuk mencipta pengikatan data dua hala pada elemen bentuk <input>, <textarea> dan <select>. 』——dokumen rasmi vue2

2.2 Adakah v-model aliran data sehala?

Ya, ia juga merupakan paradigma tipikal untuk aliran data satu arah.

Walaupun pegawai tidak menyatakan perkara ini secara eksplisit, kita boleh membuat garisan antara keduanya.

• Apakah aliran data tunggal?

Komponen anak tidak boleh menukar atribut prop yang dihantar kepadanya oleh komponen induk Pendekatan yang disyorkan ialah ia membuang peristiwa untuk memberitahu komponen induk untuk menukar nilai terikat itu sendiri. Bagaimana untuk melakukan

• v-model?

v-model Pendekatan ini konsisten sepenuhnya dengan aliran data tunggal. Ia juga menyediakan standard untuk penamaan dan definisi acara.

众所周知 .sync 修饰符是单向数据流的另一个典型范式。

『单向数据流』总结起来其实也就8个字：『数据向下，事件向上』。

四、如何让你开发的组件支持 v-model

虽然不想说，但这确实是高频面试题。

在定义 vue 组件时，你可以提供一个 model 属性，用来定义该组件以何种方式支持 v-model。

model 属性本身是有默认值的，如下：

// 默认的 model 属性
export default {
  model: {
    prop: 'value',
    event: 'input'
  }
}

也就是说，如果你不定义 model 属性，或者你按照当面方法定义属性，当其他人使用你的自定义组件时，v-model="foo" 就完全等价于 :value="foo" 加上 @input="foo = $event"。

如果把 model 属性进行一些改装，如下：

// 默认的 model 属性
export default {
  model: {
    prop: 'ame',
    event: 'zard'
  }
}

那么，v-model="foo" 就等价于 :ame="foo" 加上 @zard="foo = $event"。

没错，就是这么容易，让我们看个例子。

先定义一个自定义组件：

<template>
<div>
  我们是TI{{ ame }}冠军
  <el-button @click="playDota2(1)">加</el-button>
  <el-button @click="playDota2(-1)">减</el-button>
</div>
</template>
<script>
export default {
  props: {
    ame: {
      type: Number,
      default: 8
    }
  },
  model: { // 自定义v-model的格式
    prop: &#39;ame&#39;, // 代表 v-model 绑定的prop名
    event: &#39;zard&#39; // 代码 v-model 通知父组件更新属性的事件名
  },
  methods: {
    playDota2(step) {
      const newYear = this.ame + step
      this.$emit(&#39;zard&#39;, newYear)
    }
  }
}
</script>

然后我们在父组件中使用该组件：

// template中
<dota v-model="ti"></dota>
// script中
export default {
  data() {
    return {
      ti: 8
    }
  }
}

看看效果：

让你的组件支持 v-model 就这么容易。

五、demo和源码

获取源码请访问github 

https://github.com/zhangshichun/blog-vue2-demos/tree/master/src/views/about-v-model

更多编程相关知识，请访问：编程视频！！

Atas ialah kandungan terperinci Membawa anda memahami secara mendalam tentang v-model dalam vue2 dan lihat cara membuat komponen menyokong sintaks ini. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!