vue2.0에서 부모-자식 구성 요소가 아닌 구성 요소 간에 통신하는 방법은 무엇입니까?

다음 Vue.js 튜토리얼 칼럼에서는 vue2.0 non-parent-child 컴포넌트 간의 통신 방법을 소개하겠습니다. 도움이 필요한 친구들이 모두 참고할 수 있기를 바랍니다.

vue에서 상위 컴포넌트는 props를 사용하여 해당 컴포넌트와 통신하고, 하위 컴포넌트는 $emit+ 이벤트를 사용하여 상위 컴포넌트와 통신합니다.

이 빈 vue 인스턴스를 어디에 배치해야 합니까? 다른 정보를 확인한 결과 이것이 실제로 통신 방식이라는 것을 알았습니다.

우선 모든 하위 구성 요소를 호출할 수 있도록 이 빈 인스턴스를 루트 구성 요소 아래에 배치해야 합니다. 즉, 그림과 같이 main.js 아래에 배치해야 합니다.

import Vue from 'vue'
import App from './App'
import router from './router'


Vue.config.productionTip = false;


/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  data:{
    Hub:new Vue()
  },
  template: &#39;<App/>&#39;,
  components: { App }
});

내 두 구성요소는 child1.vue, child2. .vue입니다. 이제 child1.vue의 버튼을 클릭하여 child2.vue의 값을 변경하고 싶습니다. 이때 $root 도구를 사용해야 합니다. 달성:

child1.vue:

<template lang="pug">
  p this is child
    span(@click="correspond") 点击进行非组件之间的通信
</template>
<script>
  export default{
    methods: {
      correspond(){
          this.$root.Hub.$emit("change","改变")
      }

    }
  }
</script>

child2.vue:

<template lang="pug">
  p this is child2
    span {{message}}
</template>
<script>
  export default{
    data(){
      return {
        message: "初始值"
      }
    },
    created(){
      this.$root.Hub.$on("change", () => {
        this.message = "改变"
      })
    }
  }
</script>

이제 원하는 효과를 얻을 수 있습니다.

관련 권장 사항:

2020 프론트엔드 vue 인터뷰 질문 요약(답변 포함)

vue 튜토리얼 권장 사항: 2020년 최신 5 vue.js 비디오 튜토리얼 선택

더 많은 프로그래밍 관련 지식을 원하시면 문의하세요. 방문: 프로그래밍 교육! !

위 내용은 vue2.0에서 부모-자식 구성 요소가 아닌 구성 요소 간에 통신하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!