vue 에서 각 구성 요소 간 에 데 이 터 를 전달 하 는 방법 예시

머리말
본 고 는 주로 vue 구성 요소 간 에 데 이 터 를 전달 하 는 데 관 한 자 료 를 소개 하고 여러분 에 게 참고 학습 을 제공 합 니 다.다음은 더 이상 말 하지 않 겠 습 니 다.상세 한 소 개 를 살 펴 보 겠 습 니 다.
역할 영역
vue 에서 구성 요소 인 스 턴 스 의 역할 영역 은 고립 되 어 있 으 며,부모 구성 요소 템 플 릿 의 내용 은 부모 구성 요소 역할 영역 에서 컴 파일 됩 니 다.하위 구성 요소 템 플 릿 의 내용 은 하위 구성 요소 역할 영역 에서 컴 파일 됩 니 다.이것 은 하위 구성 요소 의 템 플 릿 에서 부모 구성 요소 의 데 이 터 를 직접 인용 할 수 없다 는 것 을 의미한다.
다음 몇 가지 방법 은 구성 요소 간 의 데이터 전달 을 실현 할 수 있다.
1.prop 을 통 해 데 이 터 를 전달 합 니 다.
1)하위 구성 요소 에서 prop 속성 을 사용 하여 필요 한 데 이 터 를 표시 합 니 다.
2)부모 구성 요소 에서 하위 구성 요 소 를 참조 하여 데 이 터 를 전송 해 야 합 니 다.
구체 적 으로 아래 코드 를 보십시오.

<div id="app">
<my-item :value="value">//    ，              ，
</my-item>
</div>  
Vue.component("my-item",{
 template:"<div>    ,{{value}}</div>",
 props:["value"],//       ，HTML           ,            ， ：myMessage，                  ：my-Message
 data:function(){
  return {

  }
 },
 methods:{
  
 }
});

//  vue  
const vm=new Vue({
 el:"#app",
 data:{
  value:"        ",
 },
 methods:{
 
 },
});

이 방법 은 부모 구성 요소 가 하위 구성 요소 에 데 이 터 를 전달 하 는 데 적합 합 니 다.먼저 무엇 을 원 하 는 지 알려 주 고 무엇 을 주 는 지 기억 할 수 있 습 니 다.
메모:이 방식 은 단 방향 데이터 흐름 입 니 다.부모 구성 요소 의 속성 이 변 할 때 하위 구성 요소 에 전달 되 지만 거꾸로 되 지 않 습 니 다.prop 의 데 이 터 를 바 꾸 려 면 다음 과 같은 방법 을 사용 할 수 있 습 니 다.국부 변 수 를 정의 하고 prop 의 값 으로 초기 화하 거나 계산 속성 을 사용 할 수 있 습 니 다.
2.사용자 정의 이벤트 통 해
사용자 정의 이 벤트 는 하위 구성 요소 가 부모 구성 요소 에 데 이 터 를 전달 할 수 있 습 니 다.구체 적 인 방법 은 다음 과 같 습 니 다.
1)하위 구성 요소 에서 사용$emit(eventName,[...args])트리거 이벤트,데이터 전달
2)부모 구성 요소 에서$on(eventName,callback)감청 사건 은 데 이 터 를 리 셋 함수 의 매개 변수 로 받 아들 이 고 리 셋 함 수 를 실행 합 니 다.
사실 이런 방법 은 angular 에서 컨트롤 러 간 에 데 이 터 를 전달 하 는 것 과 약간 유사 하 다.트리거 와 감청 이벤트 의 이벤트 형식 이 일치 해 야 데 이 터 를 받 아들 일 수 있 습 니 다.구체 적 으로 아래 의 예 를 보면:

<div id="app">
{{number}}
<!--            ，              ,    ，     -->
<my-item v-on:cli="totlcli">
</my-item>
</div>

Vue.component("my-item",{
template:"<button v-on:click='add'>{{count}}</button>",
data:function(){
 return {
  count : 0,
 }
},
methods:{
 add:function(){
  this.count+=1;
  this.$emit("cli",this.count);//          。             
 }
}
});

//  vue  
const vm=new Vue({
el:"#app",
data:{
 number:""
},
methods:{
 totlcli:function(num){//              ，   ，            。
  return this.number=num;
 },
},
});

이렇게 하면 하위 구성 요소 의 데 이 터 를 사용자 정의 이벤트 방식 으로 부모 구성 요소 에 전달 할 수 있 습 니 다.
3.slot 로 내용 배포
주요 응용 장면 은 부모 구성 요소 의 내용 과 하위 구성 요소 의 템 플 릿 을 혼합 할 때 사용 합 니 다.구체 적 인 사용 절차:
1)하위 구성 요소 에 서 는 구성 요소 템 플 릿 의 내용 으로 슬롯 탭 을 나 누 어 줍 니 다.요소 자체 가 대 체 됩 니 다.
2)부모 구성 요소 에 slot 속성 을 사용 하여 하위 구성 요소 내용 을 어느 slot 에 삽입 하 는 지 표시 합 니 다.
name 과 동시에 응답 하 는 내용 이 하위 구성 요소 에 삽 입 됩 니 다.
구체 적 으로 아래 의 예 를 보면:

<div id="app">
 <my-item>
  <p slot="header">    </p>
  <p>       ，</p>
  <p slot="footer">    </p>
 </my-item>
</div>

Vue.component("my-item",{
  template:"<div>"+
    "<header><slot name='header'></slot></header>"+
    "<main><slot>    ，            </slot></main>"+
    "<footer><slot name='footer'></slot></footer>"+
    "<div>",
  props:{
  },
  data:function(){
   return {   
   }
  }
 });
 const vm=new Vue({
  el:"#app",
  data:{
  },
  methods:{ 
  },
 });

렌 더 링 구 조 는 다음 과 같 습 니 다.

메모:익명(name 속성 사용 하지 않 음)의 slot 요 소 는 일치 하 는 내용 세 션 을 찾 을 수 없 는 예비 슬롯 입 니 다.즉,부모 구성 요소 에서 slot 속성 을 사용 하지 않 은 내용 은 이 예비 슬롯 에 표 시 됩 니 다.기본 slot 가 없 으 면 일치 하 는 콘 텐 츠 세 션 을 찾 지 못 하면 버 려 집 니 다.
총결산
이상 은 이 글 의 전체 내용 입 니 다.본 논문 의 내용 이 여러분 의 학습 이나 업무 에 어느 정도 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 댓 글 을 남 겨 주 셔 서 저희 에 대한 지지 에 감 사 드 립 니 다.