Vue의 통신 방법은 무엇입니까?

통신 방법: 1. 하위 구성 요소는 props 속성을 설정하고 상위 구성 요소가 전달한 매개 변수를 수신하도록 정의하며 구성 요소는 하위 구성 요소 태그를 사용할 때 리터럴을 통해 값을 전달합니다. 2. 하위 구성 요소는 $emit을 통해 사용자 정의 이벤트를 트리거하여 통신합니다. 3. 통신을 위해 ref를 사용하십시오. 4. 통신을 위해 EventBus를 사용합니다. 5. $parent 또는 $root를 사용하여 통신합니다. 6. $attrs를 사용하여 $listener와 통신합니다. 7. 의사소통을 위해 제공 및 주입을 사용하십시오. 8. vuex를 사용하세요.

이 튜토리얼의 운영 환경: windows7 시스템, vue3 버전, DELL G3 컴퓨터.

우리 모두는 구성 요소가 vue의 가장 강력한 기능 중 하나라는 것을 알고 있습니다. vue의 각 .vue는 특정 미디어와 특정 형식을 통해 수신자에게 정보를 전송하는 것을 의미합니다. 특정 목적. 광범위하게 말하면 모든 정보 트래픽은 구성 요소 간 통신입니다. 즉, 구성 요소(.vue)는 특정 목적을 달성하기 위해 어떤 방식으로든 정보를 전달합니다. 예를 들어 UI 프레임워크에서 테이블 구성 요소를 사용할 때 테이블로 이동할 수 있습니다. 특정 데이터가 전달되며 이는 본질적으로 구성 요소 간의 통신을 형성합니다.

1. 구성 요소 간 통신은 무엇을 해결합니까?

고대에는 우체국, 메시지를 전달하는 날아다니는 비둘기, 신호등 화재 경보기, 기호, 언어, 눈, 접촉 등을 통해 정보를 전달했습니다. 기술 수준이 높아지면서 중국의 급속한 발전에 따라 통신은 기본적으로 유선 또는 무선으로 완성되고 있으며, 유선전화, 유선전화, 무선전화, 휴대전화, 인터넷, 심지어 영상전화까지 다양한 통신방식이 속속 등장하고 있다. 위 단락에서 우리는 정보가 동기화되어 Vue로 다시 공유된다는 것을 알 수 있습니다. 각 구성 요소는 자체 범위를 가지고 있습니다. 그러나 실제 개발 작업에서는 종종 데이터를 서로 공유해야 합니다. 컴포넌트 통신의 기반이기도 한 컴포넌트들이 서로 통신하여 유기적이고 완전한 시스템을 형성하는 것이 목적입니다

2. 컴포넌트 간 통신 분류

컴포넌트는 다음과 같이 나눌 수 있습니다

• 부모 컴포넌트와 자식 컴포넌트 간의 통신

• 형제 컴포넌트 간 통신

• 상위 컴포넌트와 하위 컴포넌트 간 통신

• 비관계형 컴포넌트 간 통신

관계 다이어그램:

3. 구성 요소 간 통신 솔루션

vue에서 8가지 일반적인 통신 솔루션 구성

• props 통과

• $emit을 통해 사용자 정의 이벤트 트리거

• 사용 심판

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

• 하위 구성 요소는 props 속성을 설정하고 상위 구성 요소가 전달한 매개 변수를 정의합니다.

• 상위 구성 요소는 하위 구성 요소를 사용할 때 리터럴을 통해 값을 전달합니다. tag

Children.vue code><p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false">props:{ // 字符串形式 name:String // 接收的类型参数 // 对象形式 age:{ type:Number, // 接收的类型为数值 defaule:18, // 默认值为18 require:true // age属性必须传递 } }</pre><div class="contentsignin">로그인 후 복사</div></div><strong><code>Father.vue 구성 요소

<Children name="jack" age=18 />

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

적용 가능한 시나리오: 하위 구성 요소 통과 데이터를 상위 구성 요소에

• 하위 구성 요소는 $emit를 통해 자체적으로 트리거합니다. 이벤트를 정의합니다. $emit의 두 번째 매개 변수는 전달된 값입니다

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

• Chilfen .vue

  this.$emit('add', good)

Father.vue

• <Children @add="cartAdd($event)" />

ref

Children.vue

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

Father.vue组件

// 创建一个中央时间总线类  
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的功能

$emit 触发自定义事件

适用场景：子组件传递数据给父组件

子组件通过$emit触发自定义事件，$emit第二个参数为传递的数值

父组件绑定监听器获取到子组件传递过来的参数

Chilfen.vue

this.$bus.$emit('foo')

Father.vue

this.$bus.$on('foo', this.handle)

ref

• 父组件在使用子组件的时候设置ref

• 父组件通过设置子组件ref

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

상위 구성 요소는 하위 구성 요소 ref를 설정하여 데이터를 가져옵니다

상위 구성 요소

this.$parent.on('add',this.add)

• EventBus
• 사용 시나리오: 형제 구성 요소가 값을 전달합니다

• create 중앙 이벤트 버스 EventBus

형제 구성 요소는 이벤트 정의에서 $emit 트리거를 전달합니다. $emit의 두 번째 매개 변수는 전달된 값입니다.

공통 조상 $parent 또는 $root

형제 컴포넌트

this.$parent.emit('add')

또 다른 형제 컴포넌트

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

• $attrs 및 $listeners

를 통해 통신 브리지 구축

적용 가능한 시나리오: 조상이 후손에게 데이터를 전달합니다

일괄 업로드 속성 $attrs 및 $listeners 설정

包含了父级作用域中不作为 prop 被识别 (且获取) 的特性绑定 ( class 和 style 除外)。

可以通过 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 与 inject

• 在祖先组件定义provide属性，返回传递的值

• 在后代组件通过inject接收组件传递过来的值

祖先组件

provide(){  
    return {  
        foo:'foo'  
    }  
}

后代组件

inject:['foo'] // 获取到祖先组件传递过来的值

vuex

• 适用场景: 复杂关系的组件数据传递

• Vuex作用相当于一个用来存储共享变量的容器 

• state用来存放共享变量的地方

• getter，可以增加一个getter派生状态，(相当于store中的计算属性），用来获得共享变量的值

• mutations用来存放修改state的方法。

• actions也是用来存放修改state的方法，不过action是在mutations的基础上进行。常用来做一些异步操作

小结

• 父子关系的组件数据传递选择 props  与 $emit进行传递，也可选择ref

• 兄弟关系的组件数据传递可选择$bus，其次可以选择$parent进行传递

• 祖先与后代组件数据传递可选择attrs与listeners或者 Provide与 Inject

• 复杂关系的组件数据传递可以通过vuex存放共享的变量

【相关推荐：vuejs视频教程、web前端开发】

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