입력 v-model="포인트"> {{ 가리키다 }} JS newVue({ 엘:'#앱', 데이터:{ 포인트:'zqz' } }) 입력한 값이 변경되면"/> <입력 v-model="포인트"> {{ 가리키다 }} JS newVue({ 엘:'#앱', 데이터:{ 포인트:'zqz' } }) 입력한 값이 변경되면">
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
이벤트가 트리거되고 입력이 바인딩됩니다. 함수를 인라인하여 무언가
의 값을 변경합니다. 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)
<input>
또는<textarea></textarea>
요소의 값이 변경되면 DOM 입력 이벤트가 동기적으로 트리거됩니다. (type = checkbox 또는 type = radio인 입력 요소의 경우 value 속성이 변경되지 않기 때문에 사용자가 컨트롤을 클릭해도 입력 이벤트가 실행되지 않습니다.) 또한 콘텐츠가 변경되면 contenteditable의 편집기에서 실행됩니다. 이 경우 이벤트 대상은 편집 호스트 요소입니다. contenteditable이 true인 요소가 두 개 이상 있는 경우 "편집 호스트"는 상위 요소를 편집할 수 없는 가장 가까운 상위 요소입니다. 마찬가지로 designMode 편집기의 루트 요소에서도 실행됩니다. 자세한 내용은 MDN의 입력 이벤트를 참조하세요.컴포넌트의 v-model🎜🎜컴포넌트의 v-model 유효성 원칙
🎜
🎜먼저 코드를 살펴보겠습니다🎜🎜el-input.vue🎜값
속성을 수락합니다🎜- 🎜새
값
이 있는 경우입력
이벤트를 트리거합니다. 🎜...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 중국어 웹사이트의 기타 관련 기사를 참조하세요!