> 웹 프론트엔드 > JS 튜토리얼 > 구성 요소의 v-model 인스턴스에 대한 자세한 설명

구성 요소의 v-model 인스턴스에 대한 자세한 설명

零下一度
풀어 주다: 2017-06-26 10:36:22
원래의
2203명이 탐색했습니다.

v-model의 마법


html

<div id="app">
 <input v-model="poin">
  {{ poin }}</div>
로그인 후 복사

js

new Vue({
  el:&#39;#app&#39;,
  data:{poin:&#39;zqz&#39;
  }})
로그인 후 복사

입력한 값이 변경되면 데이터의 포인트 값도 변경됩니다.

이론적으로는 데이터의 값이 변경되면 이벤트가 발생하는데 우리가 그걸 못 봤다고요?

사실 vue 문서에 명시되어 있습니다:

<input v-model="something">
로그인 후 복사

는 아래 구문 설탕입니다

<input v-bind:value="something" v-on:input="something = $event.target.value">
로그인 후 복사

입력할 때마다 input 이벤트가 트리거되고 입력이 바인딩됩니다. 함수를 인라인하여 무언가의 값을 변경합니다. input事件,input绑定了内联函数,从而改变了something的值。

你好奇input事件是什么?

<input><textarea> 元素的值更改时,DOM input 事件会同步触发。(对于 type = checkbox 或 type = radio 的输入元素,当用户单击控件时,输入事件不会触发,因为value属性不会更改。) 此外,当内容更改时,它会在 contenteditable 的编辑器上触发。在这种情况下,事件目标是编辑主机元素。如果有两个或多个具有 contenteditable 的元素为真,“编辑主机”是其父级不可编辑的最近的祖先元素。同样,它也会在 designMode 编辑器的根元素上触发。

具体见:MDN的input事件

组件中的v-model


组件的v-model 生效原则

  • 接受一个value 属性

  • 在有新的value 时触发 input 事件

我们先看一下代码

el-input.vue

<template>

    <div>
      <p>input的封装</p>
      <input type="text"
             ref="input"
             :value="value"
             @input="updateValue($event.target.value)"
             @focus="selectAll"
             >
    </div>

</template>
<script>

export default {
  name: &#39;el-input&#39;,
  props: {
    value: {
      type: Number,
      default: 0
    },
  },
  methods: {
    // 每次都会加一
    updateValue (value) {
      this.$refs.input.value = value + 1;
    },
    selectAll(event) {
      setTimeout(function () {
        event.target.select()
      }, 0)
    }
  }
}

</script>
<style>
</style>
로그인 후 복사

将这个组件在Tom.vue中使用

<style>
</style>
<template>
    <!-- 在父组件中使用 -->
    <div>
      <v-el-input></v-el-input>
    </div>

</template>
<script>
import vElInput from &#39;./el-input.vue&#39;

export default {
  name: &#39;tom&#39;,
  components: {
    vElInput
  }
}

</script>
로그인 후 복사

구성 요소의 v-model 인스턴스에 대한 자세한 설명

每次使用的时候都会在后面加个1

但是问题来了,我们要如何在Tom.vue中取到这个值呢?

  • 方法一:使用事件 但是感觉有点曲线救国

  • 方法二:使用v-model

这里就体现出了v-model的强大了,因为上面的语法糖,自动的绑定了input事件。所以我们可以利用这个特性去做些事情。

给组件绑定v-model

将Tom.vue的代码修改一下

<template>
    <!-- 在父组件中使用 -->
    <div>
      <v-el-input v-model="eleValue"></v-el-input>
      eleValue的值:{{ this.eleValue }}
    </div>

</template>
<script>
import vElInput from &#39;./el-input.vue&#39;

export default {
  name: &#39;tom&#39;,
  components: {
    vElInput
  },
  data () {
    return {
      eleValue: 666 //设置一个默认值
    }
  }
}

</script>
로그인 후 복사

初始状态
구성 요소의 v-model 인스턴스에 대한 자세한 설명

输入后的状态구성 요소의 v-model 인스턴스에 대한 자세한 설명

然后当我们输入的值发生变化的时,我们预想的eleValue依旧没有发生变化,而el-input.vue中的value确发生了变化

也是就是说value发生变化后没有传递(同步)到父组件中,这也就是vue1中的.sync的用处,而在vue2中已经废弃了。

修改el-input.vue代码,增加this.$emit(&#39;input&#39;, value*1)

입력이벤트가 무엇인지 궁금하시죠?

<input> 또는 <textarea> 요소의 값이 변경되면 DOM 입력 이벤트가 동기적으로 트리거됩니다. (type = checkbox 또는 type = radio인 입력 요소의 경우 value 속성이 변경되지 않기 때문에 사용자가 컨트롤을 클릭해도 입력 이벤트가 실행되지 않습니다.) 또한 콘텐츠가 변경되면 contenteditable의 편집기에서 실행됩니다. 이 경우 이벤트 대상은 편집 호스트 요소입니다. contenteditable이 true인 요소가 두 개 이상 있는 경우 "편집 호스트"는 상위 요소를 편집할 수 없는 가장 가까운 상위 요소입니다. 마찬가지로 designMode 편집기의 루트 요소에서도 실행됩니다.
자세한 내용은 MDN의 입력 이벤트를 참조하세요.

컴포넌트의 v-model🎜🎜

컴포넌트의 v-model 유효성 원칙

    < li>🎜 속성을 ​​수락합니다🎜
  • 🎜새 이 있는 경우 입력 이벤트를 트리거합니다. 🎜
🎜먼저 코드를 살펴보겠습니다🎜🎜el-input.vue🎜
...updateValue (value) {  this.$refs.input.value = value + 1;  // 触发组件上绑定的input事件,以实现value同步  this.$emit(&#39;input&#39;, value*1)},...
로그인 후 복사
🎜Tom.vue에서 이 구성 요소를 사용하세요🎜rrreee🎜구성 요소의 v-model 인스턴스에 대한 자세한 설명🎜🎜사용할 때마다 끝에 1이 추가됩니다🎜🎜하지만 문제는 이 값을 어떻게 구하느냐는 것입니다. Tom.vue에서? 🎜
  • 🎜방법 1: 이벤트를 사용하지만 나라를 구하기에는 약간 휘어진 느낌🎜
  • 🎜방법 2: v-model 사용🎜 ul>🎜위의 구문 설탕이 자동으로 input 이벤트를 바인딩하기 때문에 v-model의 강력한 기능이 여기에 반영됩니다. 그래서 우리는 이 기능을 사용하여 뭔가를 할 수 있습니다. 🎜

    v-model을 구성 요소에 바인딩

    🎜Tom.vue🎜rrreee🎜초기 상태 코드 수정
    구성 요소의 v-model 인스턴스에 대한 자세한 설명🎜🎜입력 후 상태구성 요소의 v-model 인스턴스에 대한 자세한 설명🎜🎜그런 다음 입력한 값이 변경되면 예상한 eleValue는 변경되지 않고 el-input.vue의 값도 변경됩니다🎜🎜 즉, 값은 다음과 같습니다. 변경 후 상위 구성 요소로 전송(동기화)되지 않습니다. 이는 vue1에서 .sync의 목적이지만 vue2에서는 폐기되었습니다. 🎜🎜el-input.vue 코드를 수정하고 this.$emit('input', value*1)를 추가하세요.🎜🎜rrreee🎜🎜이렇게 하면 값 동기화 문제가 실현됩니다. 🎜

위 내용은 구성 요소의 v-model 인스턴스에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
이전 기사:MOOC 강좌 정보 크롤링에 대한 예제 튜토리얼 다음 기사:이미지 캐러셀 구현 방법에 대한 자세한 설명은 무엇입니까?
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
관련 주제
더>
인기 추천
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿