집 >웹 프론트엔드 >JS 튜토리얼 >Vue 형제 구성 요소 간의 통신 방법

Vue 형제 구성 요소 간의 통신 방법

小云云원래의: 2018-01-02 13:08:481958검색

프로젝트에서 형제 구성 요소가 통신하는 상황을 자주 접하게 됩니다. 대규모 프로젝트에서는 vuex를 도입하면 컴포넌트 간의 통신 문제를 쉽게 관리할 수 있지만 일부 소규모 프로젝트에서는 vuex를 도입할 필요가 없습니다. 다음은 상위 구성요소와 하위 구성요소 간의 통신을 달성하기 위해 전통적인 방법을 사용하는 방법에 대한 간략한 소개입니다. 이번 글에서는 (Vuex를 사용하지 않고) Vue 형제 컴포넌트의 통신 방법을 주로 소개합니다. 편집자는 꽤 좋다고 생각해서 지금부터 공유하고 참고용으로 올려보겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

간단한 예: 구성 요소 a의 버튼을 클릭하여 정보를 구성 요소 b에 전달하면 구성 요소 b가 팝업됩니다.

주요 아이디어는 다음과 같습니다. 먼저 아들에서 아버지로 전달한 다음 아버지에서 아들로 전달합니다.

우선 a.vue 구성 요소에서 이벤트의 버튼 버튼에 HandleClick 이벤트를 바인딩합니다. , this.$emit( ) 메소드를 전달하여 사용자 정의 이벤트를 트리거하고 매개변수를 전달합니다.

예제에서는 this.$emit()를 사용하여 isLogFn 메서드 맞춤 이벤트를 트리거하고 로그 매개변수를 out

a.vue

<template>
 <p class="ap">
 <p>a组件</p>
 <button type="button" v-on:click="handleClick">点击打开组件b弹窗</button>
 </p>
</template>

<script>

export default {
 methods: {
 handleClick () {
  this.$emit(&#39;isLogFn&#39;,&#39;log&#39;)
 }
 }
}
</script>

<style>
.ap{
 width: 400px;
 height: 200px;
 border: 1px solid #000;
 margin: 0 auto;
}
</style>

두 번째 단계는 상위 구성 요소에서 수신하는 것입니다. 이 맞춤 이벤트는 해당 메소드를 트리거하고 구성요소가 전달한 매개변수를 승인합니다. 이제 자식 컴포넌트에서 부모 컴포넌트로 값을 전달하는 과정이 완료되었습니다.

예제에서 6c308ffe89a04ab972e01e2ed2aebe937b4447cf690b926cb947a42dad719d04는 isLogFn을 수신하여 상위 구성 요소에 정의한 lisLogFn 메서드를 트리거하고 전달된 '로그' 데이터를 가져옵니다. 아들에서 아버지로의 가치 이전을 완료합니다.

이 시점에서 모든 과정은 아직 끝나지 않았고 절반만 완료되었습니다. 다음으로 상위 구성 요소와 하위 구성 요소 간의 값 전송을 완료하고 구성 요소 a의 정보를 구성 요소 b로 전달해야 합니다.

8ac1b0948148bef2f296c8c5add64a30 태그에 islog 속성을 바인딩하고 lisLogFn 메서드를 통해 '데이터'를 얻은 후 데이터가 전달한 데이터를 판단하고 이를 기반으로 변경해야 합니다. result.data()를 통해 데이터를 b 구성 요소

App.vue

<template>
 <p id="app">
 <aPage @isLogFn = "lisLogFn"></aPage>
 <bPage :isLog = "login"></bPage>
 </p>
</template>

<script>

import aPage from &#39;./components/a.vue&#39;
import bPage from &#39;./components/b.vue&#39;

export default {
 data () {
 return {
  login: &#39;false&#39;
 }
 },
 name: &#39;app&#39;,
 components: {
 aPage,
 bPage
 },
 methods: {
 lisLogFn (data) {
  if (data == &#39;log&#39;) {
  this.login = &#39;true&#39;
  }
 }
 }
}
</script>

<style>
</style>

에 전달합니다. 마지막으로 b 구성 요소에 props를 생성하고 우리가 전달한 값인 isLog 속성을 정의해야 합니다. 그런 다음 이 데이터를 계산된 속성으로 처리하며, 이는 궁극적으로 b 구성 요소에서 사용됩니다. 예제에서는 v-show="isLogin"을 사용하여 팝업 창을 열지 여부를 제어합니다.

기억하세요! 이 props는 직접 사용할 수 없으며, 계산된 처리를 통해 처리되어야 합니다. 그 이유는 vue

One-way data flow

b.vue

<template>
 <p class="bp" v-show="isLogin">我是组件B弹窗</p>
</template>

<script>
export default {
 props: [&#39;isLog&#39;],
 data () {
 return {

 }
 },
 computed: {
 isLogin () {
  if(this.isLog == &#39;true&#39;){
  return true
  } else {
  return false
  }
 }
 }
}
</script>

<style>
 .bp{
 width: 200px;
 height: 200px;
 border: 1px #000 solid;
 margin: 0 auto;
 }

</style>

요약: 원하는 경우 형제 구성요소 간의 가치 이전을 구현하려면 먼저 아들과 아버지, 아버지와 아들 간의 가치 이전에 대해 잘 알고 있어야 합니다.

하위 부모:

하위 구성 요소는 클릭 이벤트 메서드와 같은 어떤 방식으로든 맞춤 이벤트를 트리거해야 합니다.
전달해야 하는 값은 $emit의 두 번째 매개 변수로 사용됩니다. , 이는 맞춤 이벤트에 응답하는 메서드에 실제 매개변수로 전달됩니다
상위 구성 요소에 하위 구성 요소를 등록하고 하위 구성 요소 라벨에 맞춤 이벤트에 대한 리스너를 바인딩합니다

부모 및 하위 :

자식 컴포넌트가 props에 있음 부모 컴포넌트에서 전달된 값을 받기 위해 에 속성을 생성하세요
하위 컴포넌트 props에서 생성된 속성을 하위 컴포넌트 태그에 추가하고, 전달해야 할 값을 할당하세요 하위 구성 요소에서 속성으로

Vue 형제 구성 요소 간의 통신 방법

관련 기사