Vue 컴포넌트 통신 방식 4가지 예시 공유

이 글에서는 주로 부모와 자식 컴포넌트 간 통신, 부모가 아닌 컴포넌트와 자식 컴포넌트 간 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></counter>

E

   // 1.用Props接受数据      props: [               'num'
           ],

E

모듈의 변수에 데이터를 할당하여 데이터를 상위 구성 요소에 전달할 수 있습니다.

• 정의합니다. 템플릿의 이벤트

• 하위 구성 요소의 이벤트 트리거를 수신하는 메소드에 함수 작성

데이터 변경 후 $emit를 사용하여 트리거

•      

  // 2.如果需要修改得到的数据,可以这样写
     props: [            'num'
          ],  data () {        return {
              number : this.num
          }
      },

  두 번째 통신 방법 : 이벤트버스
eventBus 이 통신 방법은 부모가 아닌 구성 요소와 자식 구성 요소 간의 통신을 목표로 하며 이벤트의 트리거링 및 모니터링을 통해 이루어집니다.

• 그러나 상위-하위 구성 요소가 아니기 때문에 이를 연결하려면 중간 구성 요소가 필요합니다.

루트 컴포넌트인 #app 컴포넌트에 모든 컴포넌트가 접근할 수 있는 컴포넌트를 정의하여 사용합니다. 구체적인 사용법은 다음과 같습니다

eventBus를 사용하여 데이터를 전송하는데 총 3가지 작업을 해야 합니다. things

1. 앱 컴포넌트에 Bus 속성을 추가하세요. (모든 컴포넌트가 this.$root.Bus를 통해 접근할 수 있고 어떤 파일도 추가할 필요가 없습니다.)

2. , this.$root.Bus .$emit는 이벤트를 트리거합니다

• 3. 구성 요소 2에서 this.$root.Bus.$on은 이벤트를 수신합니다

             

// 1. 在templete里应用子组件时,定义事件changeNumber
      <counter>
      </counter>

                       세 번째 통신 방법: localStorage 또는 sessionStorage 사용

이런 종류의 통신 비교는 간단하지만 데이터와 상태가 지저분하고 유지 관리가 쉽지 않다는 단점이 있습니다.

window.localStorage.getItem(key)을 통해 데이터 가져오기

window.localStorage.setItem(key, value)을 통해 데이터 저장

데이터 형식 변환에는 JSON.parse() / JSON.stringify()를 사용해야 합니다.

네 번째 통신 방법: Vuex를 사용하면

Vuex는 더 복잡하므로 별도의 글을 작성해도 됩니다

관련 추천:

Vue 컴포넌트 개발 경험 공유

Vue 컴포넌트의 상위-하위 통신에 대한 자세한 설명

권한 관리 모듈에서 Vue 구성 요소 인스턴스를 동적으로 로드하는 방법에 대한 자세한 설명

위 내용은 Vue 컴포넌트 통신 방식 4가지 예시 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!