Vue 단일 파일 의 데이터 전달 예시

Vue 의 단일 파일 구성 요 소 는 Vue 를 사용 할 때 매우 자주 사용 되 기 때문에 구성 요소 간 에 데 이 터 를 전달 해 야 할 때 도 자주 발생 합 니 다.크게 세 가지 상황 으로 나 눌 수 있 습 니 다.

부모 구성 요소 가 하위 구성 요소 에 데 이 터 를 전달 하고 props 를 통 해 데 이 터 를 전달 합 니 다.

하위 구성 요 소 는 부모 구성 요소 에 데 이 터 를 전달 하고 이벤트 로 데 이 터 를 전달 합 니 다.

두 개의 동급 구성 요소 간 에 데 이 터 를 전달 하고 이벤트 버스 를 통 해 데 이 터 를 전달한다.

문서 에서 도 여러 가지 상황 에서 해결 방법 을 상세 하 게 설 명 했 지만 지금 은 문 서 를 많이 읽 지 못 한 상황 에서 단일 파일 구성 요소 의 구체 적 인 작성 방식 을 찾 지 못 했 습 니 다.지능 과 이해력 이 유한 한 상황 에서 스스로 시도 해 보 았 는데 사실은 똑 같 습 니 다.그래서 이 글 은 사실 쓸데없는 말 이지 만 기록 하고 싶 어서 한 시간 이 넘 게 걸 렸 다.
준비 작업,나 는 6 개의 파일 을 새로 만 들 었 습 니 다.각각:

index.html

main.js"Vue 인 스 턴 스"

app.vue"루트 구성 요소,page 와 footer 구성 요소 포함"

page.vue"msg 의 부모 구성 요소,footer 의 동급 구성 요소"

msg.vue

footer.vue

부모 구성 요 소 는 하위 구성 요소 에 데 이 터 를 전달 하고 props 를 통 해 데 이 터 를 전달 합 니 다.
여기 서 나 는 page 가 msg 에 데 이 터 를 전달 하 는 것 을 예 로 들 면 page.vue 에서

<template>
  <div class="page">
    page
    <msg :love="message"></msg>
  </div>
</template>

<script>
import msg from './msg.vue'

export default {
 name: 'page',
 components: { msg },
 data () {
  return {
   message: 'page-msg'
  }
 }
}
</script>

msg.vue 중

<template>
  <div class="msg">
    {{ love }}
 </div>
</template>

<script>
export default {
 name: 'msg',
 props: ['love']
}
</script>

이렇게 하면 부모 구성 요소 페이지 의 데 이 터 를 하위 구성 요소 msg 에 전달 하 는 것 을 실현 할 수 있 습 니 다.
또한,하위 구성 요소 에서 props 값 을 수정 하지 말 라 는 점 을 강조해 야 합 니 다.물론 수정 은 효과 적 이 고 추천 하지 않 으 며 Vue 에 도 경고 알림 이 있 을 수 있 습 니 다.정확 한 방법 은 data 에 전 달 된 속성 이나 계산 속성 입 니 다.props 의 값 은 this.love 를 통 해 접근 할 수 있 습 니 다.
특히 props 값 은 형식 을 참조 할 때 입 니 다.간단 한 할당 을 할 수 없고 부모 구성 요소 에 영향 을 줄 수 있 습 니 다.정확 한 방법 은 딥 복사 입 니 다.
하위 구성 요 소 는 부모 구성 요소 에 데 이 터 를 전달 하고 이벤트 로 데 이 터 를 전달 합 니 다.
부모 구성 요소 page.vue 중

<template>
  <div class="page">
    page
    <msg @passData="getData"></msg>
  </div>
</template>

<script>
import msg from './msg.vue'

export default {
 name: 'page',
 components: { msg },
 data () {
  return {
   message: 'hi'
  }
 },
 methods: {
  getData (data) {
   console.log(data)
  }
 }
}
</script>

하위 구성 요소 msg.vue 중

<template>
  <div class="msg">
  {{ msg }}
  <button @click="pass">  </button>
 </div>
</template>

<script>
export default {
 name: 'msg',
 data () {
   return {
     msg: 'hello'
   }
 },
 methods: {
   pass () {
   this.$emit('passData', 'success')
  }
 }
}
</script>

클릭 하면 console 에서'uccess'가 나 왔 습 니 다.
동급 요소 간 에 데 이 터 를 전달 하고 이벤트 버스 를 통 해 전달 합 니 다.
중앙 버스 로 Vue 인 스 턴 스 를 도입 해 야 합 니 다.page 구성 요소 중

<template>
  <div class="page">
    page
    <button @click="changeMsg">click</button>
  </div>
</template>

<script>
import msg from './msg.vue'
import { bus } from '../bus.js'

export default {
 name: 'page',
 components: { msg },
 data () {
  return {
   message: 'hi'
  }
 },
 methods: {
  changeMsg () {
   bus.$emit('change', '666')
  }
 }
}
</script>

footer 구성 요소 중

<template>
  <div class="footer">
    footer
  </div>
</template>

<script>
import { bus } from '../bus.js'

export default {
 name: 'footer',
 data () {
  return {
   msg: 'hi'
  }
 },
 created () {
   bus.$on('change',(data)=>{
   console.log(data)
  })
 }
}
</script>

응,마지막 에'666'이 인쇄 된 것 을 발 견 했 어.이렇게 해서 이 루어 졌어.
마지막 으로 정리 해 보 자.
부모 구성 요 소 는 하위 구성 요소 에 데 이 터 를 전달 하고 props 를 통 해 데 이 터 를 전달 합 니 다.구체 적 인 방법 은 부모 구성 요소 에 연결 하고 하위 구성 요소 에서 만 설명 합 니 다.

//   
<father>
  <child :love="msg"></child>
</father>

//   
export default {
  ...
  props: ['love']
}

하위 구성 요 소 는 부모 구성 요소 에 데 이 터 를 전달 하고 이벤트 로 데 이 터 를 전달 합 니 다.구체 적 인 방법 은 부모 구성 요소 에서 감청 하고 하위 구성 요소 에서 촉발 합 니 다.

<father>
  <child @passData="getData"></child>
</father>

//   
export default {
  ...
  methods: {
    pass () {
      this.$emit('passData', 'hi')
    } 
  }
}

두 개의 동급 구성 요소 간 에 데 이 터 를 전달 하고 이벤트 버스 를 통 해 데 이 터 를 전달 합 니 다.

import { bus } from './bus.js'//        

//    
export default {
  ...
  methods: {
    passData () {
      this.$emit('communicate', 'hello')
    } 
  }
}

//    
export default {
  ...
  mounted: {
    this.$on('communicate', (data) => {
      //...
    })
  }
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.