이 글에서는 주로 부모와 자식 컴포넌트 간 통신, 부모가 아닌 컴포넌트와 자식 컴포넌트 간 eventBus 통신, 로컬 캐시를 사용한 컴포넌트 통신, Vuex 통신이라는 네 가지 Vue 컴포넌트 통신 방법을 공유합니다. 그것이 모두에게 도움이 되기를 바랍니다.
첫 번째 통신 방법: 부모-자식 컴포넌트 통신
상위 컴포넌트는 총 4가지 작업을 수행해야 합니다.
1.'에서 아들 가져오기 ./son.js' 하위 구성 요소 son
2. 구성 요소에 모든 하위 구성 요소 이름을 등록합니다: {"son"}
3. 상위 구성 요소의 템플릿에 하위 구성 요소를 적용합니다. ,
4. 하위 구성 요소에 데이터를 전달해야 하는 경우
// 1.引入子组件 import counter from './counter' import son from './son'
// 2.在ccmponents里注册子组件 components : { counter, son },
// 3.在template里使用子组件 <son></son>
하위 구성 요소는 한 가지만 수행하면 됩니다
1. props를 사용하여 데이터를 수락하고 데이터를 직접 사용할 수 있습니다.
2. 하위 구성 요소가 받은 데이터는 수정할 수 없습니다. . 수정해야 하는 경우 계산 속성을 사용하거나 하위 모듈 DATA
// 4.如果需要传递数据,也是在templete里写 <counter :num="number"></counter>E
// 1.用Props接受数据 props: [ 'num' ],E
정의합니다. 템플릿의 이벤트
// 2.如果需要修改得到的数据,可以这样写 props: [ 'num' ], data () { return { number : this.num } },두 번째 통신 방법 : 이벤트버스
그러나 상위-하위 구성 요소가 아니기 때문에 이를 연결하려면 중간 구성 요소가 필요합니다.
1. 앱 컴포넌트에 Bus 속성을 추가하세요. (모든 컴포넌트가 this.$root.Bus를 통해 접근할 수 있고 어떤 파일도 추가할 필요가 없습니다.) 2. , this.$root.Bus .$emit는 이벤트를 트리거합니다
// 1. 在templete里应用子组件时,定义事件changeNumber <counter :num="number" @changeNumber="changeNumber" > </counter>세 번째 통신 방법: localStorage 또는 sessionStorage 사용
이런 종류의 통신 비교는 간단하지만 데이터와 상태가 지저분하고 유지 관리가 쉽지 않다는 단점이 있습니다.
관련 추천:
Vue 컴포넌트 개발 경험 공유
Vue 컴포넌트의 상위-하위 통신에 대한 자세한 설명
권한 관리 모듈에서 Vue 구성 요소 인스턴스를 동적으로 로드하는 방법에 대한 자세한 설명
위 내용은 Vue 컴포넌트 통신 방식 4가지 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!