양식 입력 구성 요소에 Vue.js 사용자 정의 이벤트를 사용하는 방법

이번에는 Vue.js 커스텀 이벤트를 사용하여 폼 입력 컴포넌트를 구현하는 방법을 보여드리겠습니다. Vue.js 커스텀 이벤트를 사용하여 폼 입력 컴포넌트를 구현할 때 주의해야 할 주의 사항은 무엇입니까? 실제 사례를 살펴보겠습니다.

Vue.js는 양식 입력 구성 요소에 사용자 정의 이벤트를 사용합니다.

사용자 정의 이벤트는 사용자 정의 양식 입력 구성 요소를 만들고 양방향 데이터 바인딩에 v-model을 사용하는 데 사용할 수 있습니다. 명심하세요:

<input v-model="something">

이것은 다음 예의 구문적 설탕일 뿐입니다:

<input
 v-bind:value="something"
 v-on:input="something = $event.target.value">

따라서 구성 요소에 사용될 때 다음 약어와 동일합니다.

<custom-input
 v-bind:value="something"
 v-on:input="something = arguments[0]">
</custom-input>

그래서 v-모델을 만들려면 구성 요소가 적용되면 다음과 같이 해야 합니다(2.2.0부터 구성 가능):

값 제안을 수락합니다.

새 값이 있을 때 입력 이벤트를 트리거하고 새 값을 매개 변수로 사용합니다.

매우 간단한 통화를 살펴보겠습니다. 입력 사용자 정의 Control: -- 상위 구성 요소에서 하위 구성 요소 템플릿을 참조할 때 바인딩 v-model 데이터 사용:

<currency-input v-model="price"></currency-input>

Vue.component('currency-input', {
 template: '\
  <span>\
   $\
   <input\
    ref="input"\
    v-bind:value="value"\
    v-on:input="updateValue($event.target.value)"\
   >\
  </span>\
 ',
 props: ['value'],
 methods: {
  // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
  updateValue: function (value) {
   var formattedValue = value
    // 删除两侧的空格符
    .trim()
    // 保留 2 位小数
    .slice(
     0,
     value.indexOf('.') === -1
      ? value.length
      : value.indexOf('.') + 3
    )
   // 如果值尚不合规，则手动覆盖为合规的值
   if (formattedValue !== value) {
    this.$refs.input.value = formattedValue
   }
   // 通过 input 事件带出数值
   this.$emit('input', Number(formattedValue))
  }
 }
})

Since define 구성 요소 의 v-model

2.2.0 New

기본적으로 A 구성 요소의 v-model은 value prop 및 입력 이벤트를 사용합니다. 그러나 라디오 버튼 및 checkbox와 같은 입력 유형은 다른 목적으로 값을 사용할 수 있습니다. 모델 옵션은 이러한 충돌을 피할 수 있습니다.

Vue.component('my-checkbox', {
 model: {
  prop: 'checked',
  event: 'change'
 },
 props: {
  checked: Boolean,
  // 这样就允许拿 `value` 这个 prop 做其它事了
  value: String
 },
 // ...
})

<my-checkbox v-model="foo" value="some value"></my-checkbox>

위 코드는 다음과 동일합니다.

<my-checkbox
 :checked="foo"
 @change="val => { foo = val }"
 value="some value">
</my-checkbox>

checked prop을 명시적으로 선언해야 한다는 점에 유의하세요.

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 도서:

vue에서 xe-utils를 사용하는 방법

vue-router가 빌드될 때 라우팅 페이지가 표시되지 않는 문제를 해결하는 방법

위 내용은 양식 입력 구성 요소에 Vue.js 사용자 정의 이벤트를 사용하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!