>  기사  >  웹 프론트엔드  >  Vue 컴포넌트 통신 방식 4가지 예시 공유

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

小云云
小云云원래의
2018-02-07 14:23:242467검색

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

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

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

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

    데이터 변경 후 $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 :num="number"                 @changeNumber="changeNumber"
      >
      </counter>
                       세 번째 통신 방법: localStorage 또는 sessionStorage 사용
  • 이런 종류의 통신 비교는 간단하지만 데이터와 상태가 지저분하고 유지 관리가 쉽지 않다는 단점이 있습니다.

  • window.localStorage.getItem(key)을 통해 데이터 가져오기
  • window.localStorage.setItem(key, value)을 통해 데이터 저장

    데이터 형식 변환에는 JSON.parse() / JSON.stringify()를 사용해야 합니다.
  • 네 번째 통신 방법: Vuex를 사용하면

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

    관련 추천:

    Vue 컴포넌트 개발 경험 공유

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

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

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

    성명:
    본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.