Vue.js
V- 모델이 포함 된 맞춤 구성 요소

CSS firebase HTML JavaScript jQuery Laravel Node.js PHP twitter-bootstrap TypeScript
수색…


소개

종종 우리는 데이터에 대해 몇 가지 작업 / 작업을 수행하는 일부 구성 요소를 만들어야하며이를 부모 구성 요소에 필요로합니다. 대부분의 경우 vuex 가 더 나은 해결책이 될 수 있지만 하위 구성 요소의 동작이 응용 프로그램 상태와 아무 관련이없는 경우에는 범위 슬라이더, 날짜 / 시간 선택기, 파일 판독기

각 구성 요소에 대한 개별 매장을 사용할 때마다 복잡해집니다.

비고

구성 요소에 v-model 을 사용하려면 두 가지 조건을 충족해야합니다.

  1. 'value'라는 소품이 있어야합니다.
  2. 부모 컴포넌트가 예상 한 값으로 input 이벤트를 내 보냅니다. 
<component v-model='something'></component>

에 대한 통사론이다. 

<component
    :value="something"
    @input="something = $event.target.value"
>
</component>

카운터 구성 요소의 v- 모델

여기서 counter 는 v-model 사용하는 상위 구성 요소 인 demo 액세스되는 하위 구성 요소입니다. 

// child component
Vue.component('counter', {
  template: `<div><button @click='add'>+1</button>
  <button @click='sub'>-1</button>
  <div>this is inside the child component: {{ result }}</div></div>`,
  data () {
    return {
      result: 0
    }
  },
  props: ['value'],
  methods: {
    emitResult () {
      this.$emit('input', this.result)
    },
    add () {
      this.result += 1
      this.emitResult()
    },
    sub () {
      this.result -= 1
      this.emitResult()
    }
  }  
})

이 하위 컴포넌트는 sub() 또는 add() 메소드가 호출 될 때마다 result 방출합니다. 

// parent component
new Vue({
  el: '#demo',
  data () {
    return {
      resultFromChild: null
    }
  }
})

// parent template
<div id='demo'>
  <counter v-model='resultFromChild'></counter>
  This is in parent component {{ resultFromChild }}
</div>

v-model 이 하위 구성 요소에 있으므로 이름 value 을 가진 하위가 동시에 전송되었으므로 하위 구성 요소의 값을 차례로 제공 할 counter 에 입력 이벤트가 있습니다.



Modified text is an extract of the original Stack Overflow Documentation
아래 라이선스 CC BY-SA 3.0
와 제휴하지 않음 Stack Overflow