바인딩이 .sync VUE의 개질제 방법을 사용하여 부모 구성 요소 서브 어셈블리

양방향 아버지와 아들의 구성 요소를 데이터 바인딩

• 어떤 경우에는, 우리는을위한 소품해야 할 수 있습니다 "바인딩 두 방법을." 불행하게도, 진짜 문제는 서브 어셈블리는 부모 구성 요소를 수정, 부모 어셈블리와 서브 어셈블리는 명백한 소스 변경되지 않습니다 할 수 있기 때문에, 양방향 유지 보수에 바인딩을 가져올 것이다.

  우리가 추천하는 이유입니다  update:my-prop-name 대신 이벤트를 트리거 패턴. 예를 들어,에 포함 된  title 가설 소품의 구성 요소, 우리는 다음과 같은 방법으로 표현 의도에 새로운 값을 할당 할 수 있습니다 :

  . (이 $ 방출 :,에 newTitle을 '제목 업데이 트를')

  그런 다음 부모 구성 요소는 해당 이벤트를 수신하고 로컬 데이터 속성에 따라 업데이트해야 할 수 있습니다. 예를 들면 :

  < 텍스트 문서 V-바인딩 : 제목 = "doc.title" V-에 : 업데이트 : 제목 = "doc.title = $ 이벤트" > </ 텍스트 문서>

  편의를 위해, 우리는이 모드, 즉 약자 제공하는  .sync 수식을 :

  < 텍스트 문서 V 바인드 : title.sync = "doc.title"> </ 텍스트 문서>

  우리가 동시에 객체를 사용하는 경우 또한 당신이 사용할 수있는 여러 소품을 설정  .sync 수정과  v-bind 와 함께 사용 :

  < 텍스트 문서 = V-bind.sync "문서"> </ 텍스트 문서>

  이것은 것이다  doc 각 속성을 오브젝트 (예를 들면,  title)를 모두 분리 지지대 내로 통과 한 후 각각의 갱신 등을 첨가  v-on 리스너.

father.vue

<템플릿> 
  <DIV 클래스 = " 여보세요 " > // 입력 값을 실시간으로 변경 WRD, 실시간으로 변경 상자의 내용을 
    <타입의 INPUT = " 텍스트 " V-모델 = " WRD " > 
    <박스 : word.sync = " WRD " > </ 상자> 
  </ DIV> 
</ 템플릿> 
<스크립트> 
가져 오기 상자 에서 ' ./box ' // 도입 박스 서브 어셈블리 
내보내기 기본 { 
  이름 : ' 하여 HelloWorld ' ,
  데이터는 () { 반환

    


   
     {
      WRD :'' 
    } 
  }, 
  구성 요소 : { 
    상자 
  }   
}
 </ script> 

</ 스타일> <스타일 범위>

box.vue

<템플릿> 
  <DIV 클래스 = " 안녕하세요 " > 
    <DIV 클래스 = " IPT " > 
      <입력 유형 = " 텍스트 " V-모델 = " STR " > 
    </ DIV> // 말씀是父元素传过来的 
    <H2> {{말}} </ H2> 
  </ DIV> 
</ 템플릿> 
<script> 
수출 기본 { 
  이름 : ' 상자 ' , 
  데이터 () { 반환 { 
      STR :'' , 
  },

    


     
    } 
  소품 : { 
    말씀 : '' 
  }, 
  시계 : { 
    STR : 기능 (NEWVALUE, oldValue입니다는) { 
      // STR 업데이트의 값이 변경 될 때마다 이벤트를 보낼 : 단어, 이상 값 전달 
      은이 . $ EMIT를 ( ' 업데이트 : 워드 ' , NEWVALUE) 
    } 
  } 
}
 </ SCRIPT> 

<스타일 범위> </ 스타일>

데이터는 부모 구성 요소 서브 - 어셈블리를 변경하도록 변경 될 수 있지만, 서브 - 어셈블리 및 함량의 변화는 부모 컴포넌트 양방향 결합 효과는 새로운 동기화 수정 2.3.0에 의해 달성 될 수있는 영향을 미치지 않을 것이다