vue 2.0 구성 요소 간 전송 값,통신 의 다양한 방식(건어물)

Vue 에서 구성 요소 라 는 특성 은 많은 전단 er 를 매우 좋아 하 게 합 니 다.저도 그 중의 하나 입 니 다.전단 의 구성 요소 식 개발 을 더욱 합 리 적 이 고 간단 하 게 합 니 다.이번 에는 vue 2.0 구성 요소 간 의 전송 값,통신 의 다양한 방식 에 대해 이야기 합 시다.
1.경로 대역 매개 변 수 를 통 해 값 을 전달 합 니 다.
① 두 개의 구성 요소 A 와 B,A 구성 요 소 는 query 를 통 해 orderId 를 B 구성 요소 에 전달 합 니 다(트리거 이 벤트 는 이벤트,갈고리 함수 등 을 클릭 할 수 있 습 니 다)

this.$router.push({ path: '/conponentsB', query: { orderId: 123 } }) //    B

② B 구성 요소 에서 A 구성 요소 가 전달 하 는 인 자 를 가 져 옵 니 다.

this.$route.query.orderId

2.Session Storage 캐 시 설정 을 통 해 전달
① 두 개의 구성 요소 A 와 B,A 구성 요소 에 캐 시 orderdata 설정

const orderData = { 'orderId': 123, 'price': 88 }
sessionStorage.setItem('    ', JSON.stringify(orderData))

② B 구성 요 소 는 A 에 설 치 된 캐 시 를 가 져 올 수 있 습 니 다.

const orderData = { 'orderId': 123, 'price': 88 }
sessionStorage.setItem('    ', JSON.stringify(orderData))const orderData = { 'orderId': 123, 'price': 88 }
sessionStorage.setItem('    ', JSON.stringify(orderData))

이때 dataB 는 데이터 orderdata 입 니 다.
여러분 은 바 이 두 에서 Session Storage(프로그램 종료 폐기)와 Local Storage(장기 저장)의 차 이 를 구별 할 수 있 습 니 다.
3.부자 구성 요소 간 의 전송 값
(1)부모 구성 요소 하위 구성 요소 로 값 props 전달
① 부모 구성 요 소 를 정의 하고 부모 구성 요 소 는 number 라 는 수 치 를 하위 구성 요소 에 전달 합 니 다.전달 하 는 매개 변수 가 많 으 면 json 배열{}형식 을 사용 하 는 것 을 추천 합 니 다.

② 하위 구성 요 소 를 정의 합 니 다.하위 구성 요 소 는 props 방법 으로 부모 구성 요소 가 전달 하 는 값 을 가 져 옵 니 다.props 에서 받 을 수 있 는 데이터 형식 을 정의 할 수 있 습 니 다.맞지 않 으 면 오류 가 발생 할 수 있 습 니 다.

③ 만약 에 받 은 매개 변수 가 동적 이 라면,예 를 들 어 input 입력 의 내용 v-model 형식 이다.
메모:전 달 된 매개 변수 이름 은 낙타 봉 의 이름 을 식별 하지 않 습 니 다.가로 줄-이름 을 사용 하 는 것 을 추천 합 니 다.


(2)하위 구성 요소 가 부모 구성 요소 에 값 을 전달 하고 emit 이 벤트 를 통 해


4.서로 다른 구성 요소 간 에 값 을 전달 하고 eventBus(작은 프로젝트 의 적은 페이지 는 eventBus,큰 프로젝트 의 여러 페이지 는 vuex)를 사용 합 니 다.
① 새로운 vue 인 스 턴 스 를 정의 하여 데 이 터 를 전달 하고 내 보 냅 니 다.

② 전달 방법 이름과 전송 내용 을 정의 하고 이벤트 나 갈고리 함 수 를 클릭 하여 이벤트 Bus.emit 사건 을 촉발 합 니 다.

③ 전 달 된 데 이 터 를 받는다.
메모:enentBus 는 다른 새로운 Vue 인 스 턴 스 입 니 다.this 가 대표 하 는 vue 인 스 턴 스 두 개 를 구분 합 니 다.

5.vuex 에서 값 을 전달 합 니 다.
vuex 를 왜 사용 합 니까?
vuex 는 주로 데이터 상호작용 을 합 니 다.부자 구성 요소 의 전송 값 은 쉽게 할 수 있 습 니 다.그러나 형제 구성 요소 간 의 전송 값(형제 구성 요소 에 부자 구성 요소 가 있 습 니 다)이나 대형 spa 단일 페이지 프레임 워 크 프로젝트,페이지 가 많 고 한 층 에 한 층 씩 포 함 된 전송 값 은 매우 번 거 롭 습 니 다.vuex 로 공 통 된 상태 나 데 이 터 를 유지 하 는 것 이 마음 에 들 것 입 니 다.
수요:두 구성 요소 A 와 B,vuex 가 유지 하 는 공공 데 이 터 는 식당 의 이름 resturantName 입 니 다.기본 식당 이름 은 비 가 식당 입 니 다.그러면 현재 A 와 B 페이지 에 비 가 식당 이 표 시 됩 니 다.A 가 식당 이름 을 A 식당 으로 바 꾸 면 B 페이지 는 다음 과 같이 표 시 됩 니 다.  A 식당,반대로 B 는 같은 이 치 를 고친다.이것 이 바로 vuex 가 공공 상태 나 데 이 터 를 유지 하 는 매력 입 니 다.한 곳 에서 데 이 터 를 수정 하면 이 프로젝트 의 다른 페이지 에서 이 데이터 가 됩 니 다.

① 먼저 sotre 폴 더 를 새로 만 들 고 따로 유지 합 니 다actions mutations getters
② index.js 파일 에 vuex 를 새로 만 든 store 인 스 턴 스
*as 는 이 파일 의 모든 내용 을 가 져 오 면 하나의 인 스 턴 스 로 가 져 오지 않 아 도 된다 는 뜻 입 니 다.

③ main.js 에서 store 인 스 턴 스 가 져 오기

④ 구성 요소 A 에서 클릭 이 벤트 를 정의 하고 식당 의 이름 을 변경 하려 면 클릭 하고 식당 의 이름 을 이벤트 에서 매개 변수 로 전달 합 니 다.
...mapactions 와...mapgetters 는 모두 vuex 가 제공 하 는 문법 사탕 으로 밑바닥 에 이미 봉 하여 가 져 오 면 사용 할 수 있 고 많은 조작 을 간소화 할 수 있 습 니 다.
그 중에서.............................................................................

...mapGetters(['resturantName'])   this.$store.getters.resturantName

    B 구성 요소

⑤ actions 의 동작 은 이해 하기 편리 하도록 ES6 의 화살표 함수 가 이해 하기 쉬 운 함수 로 바 뀌 었 고 commt 는 mutations 에 제출 되 었 습 니 다.

⑥ mutations,mutations 값 의 모든 vuex 절차 에서 데 이 터 를 바 꿀 수 있 는 유일한 작업 은 다른 절차 에서 수정 하 는 것 이 불법 입 니 다.
이 단계 에서 구성 요 소 를 전달 합 니 다.  식당 이름 은 vuex 가 공동으로 유지 하 는 상태 resturantName 에 할당 되 었 습 니 다.이 때 모든 resturantName 은 식당 A 가 되 었 습 니 다.

⑦ getter 에서 최종 상태 가 져 오기

⑨ 계산 속성 에서 최종 데이터 resturantName

총결산
위 에서 말 한 것 은 소 편 이 여러분 에 게 소개 한 vue 2.0 구성 요소 간 의 전송 값,통신 의 여러 가지 방식 입 니 다.여러분 에 게 도움 이 되 기 를 바 랍 니 다.궁금 한 점 이 있 으 시 면 저 에 게 메 시 지 를 남 겨 주세요.소 편 은 제때에 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!