집 >웹 프론트엔드 >View.js >Vue 구성 요소 간에 통신하는 방법은 무엇입니까?

Vue 구성 요소 간에 통신하는 방법은 무엇입니까?

WBOY원래의: 2022-03-24 17:41:1717983검색

방법: 1. 공통 조상 "$parent" 또는 "$root"를 통해 통신합니다. 2. 상위 구성 요소는 하위 구성 요소 참조를 설정하여 통신합니다. 3. Brother 구성 요소는 "$emit", "$의 두 번째 매개 변수를 통해 사용자 정의 이벤트를 트리거합니다. Emit"은 전달된 값이고 다른 형제 구성 요소는 "$on"을 통해 사용자 정의 이벤트를 수신합니다.

이 기사의 운영 환경: Windows 10 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터.

Vue 컴포넌트 간 통신 방법은 무엇인가요

1. 컴포넌트 간 통신의 개념

시작하기 전에 컴포넌트 간 통신이라는 단어를 나누어 보겠습니다. vue 가장 강력한 기능 중 하나인 vue의 모든 .vue는 구성 요소로 간주될 수 있습니다. 통신은 특정 목적을 달성하기 위해 특정 매체 및 특정 형식을 통해 수신자에게 정보를 전송하는 것을 의미합니다. 광범위하게 말하면, 모든 정보 트래픽은 통신입니다

구성 요소 간 통신은 구성 요소(.vue)가 특정 목적을 달성하기 위해 특정 방식으로 정보를 전달한다는 것을 의미합니다.

예를 들어

우리는 UI 프레임워크에서 테이블 구성 요소를 사용하고 있습니다. 데이터는 테이블 구성 요소로 전달될 수 있으며 이는 본질적으로 구성 요소 간 통신을 형성합니다

2. 구성 요소 간 통신으로 해결되는 문제

고대에는 여관과 날아다니는 비둘기, 비콘 화재 경보기를 통해 편지를 전달했습니다. 정보를 전달하기 위한 기호, 언어, 눈, 접촉 등의 방법 오늘날 과학기술의 급속한 발전으로 인해 의사소통은 기본적으로 유선전화, 유선전화, 무선전화 등으로 완성되고 있다. 휴대폰, 인터넷, 영상 통화 등의 방법

위 단락에서 통신의 본질은 정보 동기화 및 공유임을 알 수 있습니다다시 vue에서 각 구성 요소에는 고유한 범위가 있지만 구성 요소 간의 데이터는 공유되세요그러나 실제 개발 작업에서는 컴포넌트가 데이터를 공유하도록 해야 하는 경우가 많습니다. 이는 컴포넌트 통신의 목적이기도 합니다

서로 통신하여 유기적인 완전한 시스템을 형성합니다

2. 컴포넌트 간 통신 분류

컴포넌트 간 통신 분류는 다음과 같이 나눌 수 있습니다.

상위 컴포넌트와 자식 컴포넌트 간 통신

형제 컴포넌트 간 통신

손자 컴포넌트와 하위 컴포넌트 간 통신
비관계형 컴포넌트 간 통신

props를 통해 전달됨

$를 통해 맞춤 이벤트를 진행했습니다.

리스너와 함께 ref
EventBus
parent 또는 root
attrs 사용
Provide and Inject
Vuex
props는 데이터를 전달합니다
적용 가능 시나리오: 상위 구성 요소는 하위 구성 요소에 데이터를 전달합니다

상위 구성 요소는 하위 구성 요소 태그의 리터럴을 사용하여 값을 전달합니다 Children.vue

props:{
    // 字符串形式
 name:String // 接收的类型参数
    // 对象形式
    age:{  
        type:Number, // 接收的类型为数值
        defaule:18,  // 默认值为18
       require:true // age属性必须传递
    }
}

Father.vue 구성 요소

d3c3b8c42af390630880e033381f8f60

$emit이 사용자 정의 이벤트를 트리거합니다

적용 가능한 시나리오: 하위 구성 요소 전달 데이터가 전송됩니다. 상위 구성 요소에

하위 구성 요소는 $emit를 통해 맞춤 이벤트를 트리거합니다. $emit의 두 번째 매개 변수는 전달된 값입니다.

상위 구성 요소는 하위 구성 요소가 전달한 매개 변수를 얻기 위해 리스너를 바인딩합니다Chilfen.vue

this.$emit(&#39;add&#39;, good)
Father.vue
<Children @add="cartAdd($event)" />

ref

하위 구성 요소를 사용할 때 상위 구성 요소는 ref를 설정합니다.

상위 구성 요소는 하위 구성 요소 ref

Parent 구성 요소

<Children ref="foo" />
this.$refs.foo  // 获取子组件实例，通过子组件实例我们就能拿到对应的数据

EventBus

사용 시나리오: Brother 구성 요소가 값을 전달합니다.

중앙 시간 버스 EventBus를 만듭니다

형제 구성 요소는 $emit를 통해 맞춤 이벤트를 트리거하고 $emit의 두 번째 매개 변수는 전달된 값입니다.다른 형제 구성 요소는 $on

Bus를 통해 맞춤 이벤트를 수신합니다. .js

// 创建一个中央时间总线类
class Bus {
  constructor() {
    this.callbacks = {};   // 存放事件的名字
  }
  $on(name, fn) {
    this.callbacks[name] = this.callbacks[name] || [];
    this.callbacks[name].push(fn);
  }
  $emit(name, args) {
    if (this.callbacks[name]) {
      this.callbacks[name].forEach((cb) => cb(args));
    }
  }
}

// main.js
Vue.prototype.$bus = new Bus() // 将$bus挂载到vue实例的原型上
// 另一种方式
Vue.prototype.$bus = new Vue() // Vue已经实现了Bus的功能

Children1.vue
this.$bus.$emit(&#39;foo&#39;)
Children2.vue
this.$bus.$on(&#39;foo&#39;, this.handle)

Parent 또는 root

공통 조상 $parent 또는 $root

Brother 컴포넌트

this.$parent.on(&#39;add&#39;,this.add)

Another Brother 컴포넌트

this.$parent.emit(&#39;add&#39;)

attrs 및 청취자

를 통해 해외 통신 연관 구축 데이터를 자손에게 전달

배치 다운 설정 전달된 속성 $attrs 및 $listeners

에는 props로 인식(및 획득)되지 않는 상위 범위의 속성 바인딩(클래스 및 스타일 제외)이 포함되어 있습니다. v-bind="$attrs"를 전달하여 내부 구성 요소를 전달할 수 있습니다

// child：并未在props中声明foo
<p>{{$attrs.foo}}</p>
// parent
<HelloWorld foo="foo"/>

// 给Grandson隔代传值，communication/index.vue
<Child2 msg="lalala" @some-event="onSomeEvent"></Child2>
// Child2做展开
<Grandson v-bind="$attrs" v-on="$listeners"></Grandson>
// Grandson使⽤
<div @click="$emit(&#39;some-event&#39;, &#39;msg from grandson&#39;)">
{{msg}}
</div>

provide and inject

상위 구성 요소에서 제공 속성을 정의하고 전달된 값을 반환합니다.

하위 구성 요소는 전달된 값을 받습니다. 주입을 통한 컴포넌트

Ancestor 컴포넌트

provide(){
    return {
        foo:&#39;foo&#39;
    }
}

Descendant 컴포넌트

inject:['foo'] // 조상 컴포넌트가 전달한 값 가져오기

vuex

적용 가능한 시나리오: 복잡한 관계가 있는 컴포넌트 데이터 전송

Vuex는 공유 변수를 저장하기 위한 컨테이너로 기능합니다.

state는 공유 변수를 저장하는 데 사용됩니다.

getter, getter 파생 상태(스토어의 계산된 속성과 동일)를 추가하여 공유 변수를 얻을 수 있습니다.

mutations 값은 다음과 같습니다. 상태 수정을 위한 메소드를 저장하는 데 사용됩니다.

액션은 상태 수정을 위한 메서드를 저장하는 데에도 사용되지만 액션은 돌연변이를 기반으로 합니다. 일반적으로 일부 비동기 작업을 수행하는 데 사용됩니다

요약

부모-자식 관계의 구성 요소 데이터 전송의 경우 전송을 위해 props 및 $emit를 선택하고 ref를 선택할 수도 있습니다

형제 관계의 구성 요소 데이터 전송의 경우 $bus를 선택할 수 있고, 두 번째로 전송을 위해 $parent를 선택할 수 있습니다

조상 및 하위 컴포넌트 데이터 전송은 속성과 리스너를 선택하거나 Provide 및 Inject를 선택할 수 있습니다.

복잡한 관계의 컴포넌트 데이터 전송은 vuex를 통해 공유 변수를 저장할 수 있습니다

[ 관련 추천: "vue.js tutorial"]

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

성명：

이전 기사：vue에서 foreach 문을 사용하는 방법은 무엇입니까?다음 기사：vue에서 foreach 문을 사용하는 방법은 무엇입니까?