{{ ポイント }} js newVue({ el:'#app', データ:{ ポイント:「zqz」 } }) 入力した値が変わると、"/> {{ ポイント }} js newVue({ el:'#app', データ:{ ポイント:「zqz」 } }) 入力した値が変わると、">
ホームページ > 記事 > ウェブフロントエンド > コンポーネント内の v-model インスタンスの詳細な説明
html
<div id="app"> <input v-model="poin"> {{ poin }}</div>
js
new Vue({ el:'#app', data:{poin:'zqz' }})
入力した値が変わると、データ内のポイントの値も変わります。
理論的には、データの値が変化するとイベントがトリガーされますが、それが見えなかったのでしょうか?
実際、vue のドキュメントには次のように記載されています:
<input v-model="something">
は以下の糖衣構文です
<input v-bind:value="something" v-on:input="something = $event.target.value">
入力するたびに、input
イベントがトリガーされ、入力はインライン関数をバインドして、something
の値を変更します。 input
事件,input绑定了内联函数,从而改变了something
的值。
当
d5fd7aea971a85678ba271703566ebfd
或4750256ae76b6b9d804861d8f69e79d3
元素的值更改时,DOM input 事件会同步触发。(对于 type = checkbox 或 type = radio 的输入元素,当用户单击控件时,输入事件不会触发,因为value属性不会更改。) 此外,当内容更改时,它会在 contenteditable 的编辑器上触发。在这种情况下,事件目标是编辑主机元素。如果有两个或多个具有 contenteditable 的元素为真,“编辑主机”是其父级不可编辑的最近的祖先元素。同样,它也会在 designMode 编辑器的根元素上触发。
具体见:MDN的input事件
接受一个value
属性
在有新的value
时触发 input
事件
我们先看一下代码
el-input.vue
d477f9ce7bf77f53fbcf36bec1b69b7a dc6dce4a544fdca2df29d5ac0ea9906b e388a4556c0f65e1904146cc1a846beeinput的封装94b3e26ee717c64999d7867364b1b4a3 1813ca81a5bc6e5e4d9e4db5cb03ae09 16b28748ea4df4d9c2150843fecfba68 21c97d3a051048b8e55e3c8f199a54b2 3f1c4e4b6b16bbbd69b2ee476dc4f83a export default { name: 'el-input', props: { value: { type: Number, default: 0 }, }, methods: { // 每次都会加一 updateValue (value) { this.$refs.input.value = value + 1; }, selectAll(event) { setTimeout(function () { event.target.select() }, 0) } } } 2cacc6d41bbb37262a98f745aa00fbf0 c9ccee2e6ea535a969eb3f532ad9fe89 531ac245ce3e4fe3d50054a55f265927
将这个组件在Tom.vue中使用
c9ccee2e6ea535a969eb3f532ad9fe89 531ac245ce3e4fe3d50054a55f265927 d477f9ce7bf77f53fbcf36bec1b69b7a 102ab924d89e509a93751c12855efd5b dc6dce4a544fdca2df29d5ac0ea9906b 581b752f8958e789522d96089d885571da9236a413cd032428793817d58785c2 16b28748ea4df4d9c2150843fecfba68 21c97d3a051048b8e55e3c8f199a54b2 3f1c4e4b6b16bbbd69b2ee476dc4f83a import vElInput from './el-input.vue' export default { name: 'tom', components: { vElInput } } 2cacc6d41bbb37262a98f745aa00fbf0
每次使用的时候都会在后面加个1
但是问题来了,我们要如何在Tom.vue中取到这个值呢?
方法一:使用事件 但是感觉有点曲线救国
方法二:使用v-model
这里就体现出了v-model的强大了,因为上面的语法糖,自动的绑定了input
事件。所以我们可以利用这个特性去做些事情。
将Tom.vue的代码修改一下
d477f9ce7bf77f53fbcf36bec1b69b7a 102ab924d89e509a93751c12855efd5b dc6dce4a544fdca2df29d5ac0ea9906b 42df839a2e7b33d0a8a98a26e44f5e5dda9236a413cd032428793817d58785c2 eleValue的值:{{ this.eleValue }} 16b28748ea4df4d9c2150843fecfba68 21c97d3a051048b8e55e3c8f199a54b2 3f1c4e4b6b16bbbd69b2ee476dc4f83a import vElInput from './el-input.vue' export default { name: 'tom', components: { vElInput }, data () { return { eleValue: 666 //设置一个默认值 } } } 2cacc6d41bbb37262a98f745aa00fbf0
初始状态
输入后的状态
然后当我们输入的值发生变化的时,我们预想的eleValue
依旧没有发生变化,而el-input.vue中的value确发生了变化
也是就是说value发生变化后没有传递(同步)到父组件中,这也就是vue1中的.sync
的用处,而在vue2中已经废弃了。
修改el-input.vue代码,增加this.$emit('input', value*1)
d5fd7aea971a85678ba271703566ebfd
または4750256ae76b6b9d804861d8f69e79d3
要素の値が変更されると、DOM 入力イベントが同期的にトリガーされます。 (type = checkbox または type = radio の input 要素の場合、 value 属性が変化しないため、ユーザーがコントロールをクリックしても input イベントは発生しません。) さらに、コンテンツが変更されると、 contenteditable の editor でイベントが発生します。この場合、イベントのターゲットは編集ホスト要素です。 contenteditable true を持つ要素が 2 つ以上ある場合、「編集ホスト」は、その親が編集不可である最も近い祖先要素です。同様に、designMode エディターのルート要素でも起動されます。 詳細については、次を参照してください: MDN の入力イベントコンポーネント内の v-model🎜🎜コンポーネントの v-model 妥当性原則
🎜
🎜まずコードを見てみましょう🎜🎜el-input.vue🎜value
属性を受け入れます🎜- 🎜新しい
value
があるときにinput
イベントをトリガーします🎜...updateValue (value) { this.$refs.input.value = value + 1; // 触发组件上绑定的input事件,以实现value同步 this.$emit('input', value*1)},...🎜このコンポーネントを Tom.vue で使用してください🎜rrreee🎜🎜🎜それが使用されるたびに、最後に 1 が追加されます🎜🎜しかし、問題は、この値をどのように取得するかです。 Tom.vue で? 🎜
- 🎜方法 1: イベントを使用しますが、国を救うには少し曲がりくねった感じがあります🎜
- 🎜方法 2: v-model を使用します🎜 ul>🎜 上記の糖衣構文が
input
イベントを自動的にバインドするため、v-model の威力がここに反映されています。したがって、この機能を使用して何かを行うことができます。 🎜v-model をコンポーネントにバインドする
🎜 Tom.vue のコードを変更する🎜rrreee🎜初期状態
🎜🎜入力後のステータス🎜🎜その後、入力した値が変化すると、期待していたeleValue
は変化せず、el-input.vue の値も変化します🎜🎜 つまり、値は変更後に親コンポーネントに転送 (同期) されません。これが vue1 の.sync
の目的ですが、vue2 では廃止されました。 🎜🎜 el-input.vue コードを変更し、this.$emit('input', value*1)
を追加します🎜🎜rrreee🎜🎜これにより、値の同期の問題が実現します。 🎜
以上がコンポーネント内の v-model インスタンスの詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。