Vue 구성 요소 내부 에서 양 방향 데이터 바 인 딩 을 위 한 인 스 턴 스 코드

1194 단어 vue양 방향 데이터 바 인 딩구성 요소
사고방식:부모 구성 요 소 는 props 를 통 해 하위 구성 요소 에 값 을 전달 하고,하위 구성 요 소 는$emit 를 통 해 부모 구성 요소 에 해당 하 는 props 값 을 수정 하 라 고 알려 줍 니 다.구체 적 으로 다음 과 같이 실 현 됩 니 다.

import Vue from 'vue'
const component = {
  props: ['value'],
   template: `
    <div>
      <input type="text" @input="handleInput" :value="value">
    </div>
  `,
   data () {
     return{}
   },
   methods: {
    handleInput (e) {
      this.$emit('input', e.target.value)
    }
  }
}
new Vue({
  components: {
    CompOne: component
   },
   el: '#root',
   template: `
    <div>
     <comp-one :value1="value" @input="value = arguments[0]"></comp-one>
    </div>
   `,
 data () {
  return{
    value: '123'
  }
 }
})
총결산
위 에서 말 한 것 은 소 편 이 소개 한 Vue 구성 요소 내부 에서 양 방향 데이터 바 인 딩 을 실현 하 는 인 스 턴 스 코드 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
PHP 프로그래머 로 서 MongoDB 의 다섯 가 지 를 알 아야 합 니 다.
PHP 오류 와 Logging 함수 에 대한 깊 은 이해

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage