집 > 기사 > 웹 프론트엔드 > Vue.js 사용자 정의 이벤트의 양식 입력 구성 요소 방법

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

亚连원래의: 2018-05-31 16:32:541560검색

이제 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부터 구성 가능):

값 제안을 수락합니다.

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

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

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

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

사용자 정의 구성 요소의 v-model

2.2.0 신규

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

Vue.component(&#39;my-checkbox&#39;, {
 model: {
  prop: &#39;checked&#39;,
  event: &#39;change&#39;
 },
 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을 명시적으로 선언해야 한다는 점에 유의하세요.

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

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

관련 기사