자체 제작 구성 요소도 v-model을 실현할 수 있다.
설치 방법을 설명합니다.
참조공식 문서제작견본.
UI를 통일된 텍스트 입력 디자인으로 가정하여 UiText Input이라는 구성 요소를 만듭니다.
문자 입력 UI의 디자인을 통일하기 위해 설치할 기회가 많은 것 같습니다.그렇지 않나요?Vuetify 사용?
완료 이미지

결론은 여기

UiTextInput 구현

리본에서 를 클릭합니다.

props 속성에서value를 설정하여 부모 구성 요소로부터 값을 받습니다.

input 이벤트 $emit에 알리고 변경된 값을 부모 구성 요소에 전달합니다.

필요하다
따라서,computed에서 getter/setter를 만들고 input의 v-model 값과 연결합니다.

getter는props의value를 되돌려주고 부모 구성 요소로부터 값을 받습니다.

setter에서 $emit input 이벤트를 하고 변경된 값을 부모 구성 요소에 전달합니다.

실현된 원본 코드는 다음과 같다.

<template>
  <input v-model="text" placeholder="入力してください">
</template>

<script>
export default {
  props: {
    value: {
      type: String
    }
  },

  computed: {
    text: {
      get() {
        return this.value;
      },
      set(text) {
        this.$emit("input", text);
      }
    }
  }
}
</script>

<style scoped>
input {
  display: block;
  border-width:0px;
  border-style:None; 
  font-size: 18px;
  background-color: rgba(0,0,0,0);
  outline: 0;

  border-bottom: 1px solid #d0d0d0;
}
</style>

사용 방법

일반적인 input의 v-model과 마찬가지로 사용할 수 있습니다.
UiTextInput 구성 요소를 호출하여 v-model에 값을 지정합니다.

<template>
  <div>
    <h2>v-modelのサンプル</h2>

    <div class="field">
      <label>名前 </label>
      <UiTextInput v-model="text" class="input" />
    </div>

    <p v-if="text">こんにちは、 {{text}} さん！</p>
  </div>
</template>

<script>
import UiTextInput from "./UiTextInput.vue";

export default {
  components: {
    UiTextInput
  },

  data() {
    return {
      text: ""
    };
  }
}
</script>

<style scoped>
.field {
  display: flex;
}

label {
  flex-basis: 100px;
}

.input {
  flex-grow: 1;
}
</style>

데이터 흐름

문장과 원본 코드로 설명하면 상상하기 어려울 수 있으므로 보충용 데이터 흐름으로 도해를 한다.
사용자(상위 어셈블리)에서 하위 어셈블리로 값 전달

UiTextInput(하위 어셈블리)에서 사용자(상위 어셈블리)로 값 전달

결론

구성 요소에서 v-model을 실행할 때

props의value에서 부모 구성 요소로부터 값을 수신합니다.

input 이벤트 $emit에 알리고 부모 구성 요소에 값을 전달합니다.

하면 돼.