Vue 데이터 전송--저는 특별한 구현 기술을 가지고 있습니다

亚连
풀어 주다: 2018-05-25 16:23:28
원래의
1645명이 탐색했습니다.

이 글은 주로 Vue 데이터 전송을 위한 몇 가지 특별한 정렬 기술을 소개합니다. 필요한 친구는 이를 참고할 수 있습니다.

머리말

저는 최근에 기술 선택을 결정할 때 Vue의 eventBus에 대해 더 많은 문제에 직면했습니다. vuex와 eventBus의 사용 범위에 대해서도 질문을 받았습니다. 그러니 그냥 적어보세요. 동시에 특별한 구현 솔루션도 있습니다.

데이터 전송 방법에는 vuex, props, eventBus 및 특수 eventBus 등 여러 가지가 있습니다.

vuex

소개하지 않으면 데이터의 양과 복잡성이 감당하지 못할 경우에만 무시하게 됩니다.

props

demo

부모 및 자식 구성 요소는 값, 공식 API를 전달하고 데모를 작성하세요.

1. 상위 구성 요소

<son :info="info" @update="updateHandler"/>
// data
info: &#39;sendToSon&#39;
// methods
updateHandler (newVal) {
 this.info = newVal
}
로그인 후 복사

2. 하위 구성 요소

// props
props: [&#39;info&#39;]
// 向上传值,某个方法中使用
this.$emit(&#39;update&#39;, &#39;got&#39;)
로그인 후 복사

하위 구성 요소가 상위 구성 요소에 값을 전달합니다. -->하위 구성 요소 바인딩 A 특정 이벤트 콜백은 상위 구성 요소에 정의되어 있으며 하위 구성 요소는 이 이벤트를 트리거합니다. 자식 컴포넌트에서 부모 컴포넌트에 전달된 props를 직접 수정하는 것은 권장되지 않으므로 커스텀 이벤트를 사용해야 합니다.

제한 사항

상위-하위 구성 요소.

eventBus

demo

bus는 모두 가져온 버스 인스턴스입니다.

// bus
const bus = new Vue()
// 数据接收组件
// 当前组件接收值则
bus.$on(&#39;event1&#39;, (val)=>{})
// 数据发出组件
// 当前组件发出值则
bus.$emit(&#39;event1&#39;, val)
로그인 후 복사

이벤트 바인딩을 위한 미디어 역할을 하는 vue 인스턴스가 본질임을 알 수 있습니다. 데이터 통신을 위한 모든 경우에 사용하십시오.

두(여러) 파티가 같은 이름의 이벤트를 사용하여 소통합니다.

Problem

  1. $emit은 $on이어야 합니다. 그렇지 않으면 이벤트가 모니터링되지 않습니다. 즉, 구성 요소에 대한 특정 동시 요구 사항이 있음을 의미합니다. (참고: 라우팅이 전환되면 새 라우팅 구성 요소가 먼저 생성된 다음 이전 라우팅 구성 요소가 삭제됩니다. 경우에 따라 이 두 라이프사이클을 별도로 작성할 수 있습니다. 이 질문을 참조하세요.)

  2. $on은 구성 요소가 소멸된 후 자동으로 바인딩 해제되지 않습니다. 동일한 구성 요소가 여러 번 생성되면 이벤트가 여러 번 바인딩되고 $emit이 한 번 발생하므로 여러 응답이 필요하므로 추가 처리가 필요합니다. .

  3. 데이터는 "장기" 데이터가 아니므로 저장할 수 없습니다. $emit 후에만 적용됩니다.

그렇다면 더 적합한 솔루션이 있을까요?

특별 이벤트버스?

demo

먼저 코드, 온라인 코드를 살펴보겠습니다. 버스는 모두 수입된 버스 인스턴스입니다.

// bus
const bus = new Vue({
 data () {
  return {
   // 定义数据
   val1: &#39;&#39;
  }
 },
 created () {
  // 绑定监听
  this.$on(&#39;updateData1&#39;, (val)=>{
   this.val1 = val
  })
 }
})
// 数据发出组件
import bus from &#39;xx/bus&#39;
// 触发在bus中已经绑定好的事件
bus.$emit(&#39;update1&#39;, &#39;123&#39;)
// 数据接收组件

{{val1}}
// 使用computed接收数据
computed () {
 val1 () {
  // 依赖并返回bus中的val1
  return bus.val1
 }
}
로그인 후 복사

다릅니다

  1. 정통 eventBus는 이벤트를 바인딩하고 트리거하는 데만 사용되며 데이터에 관심이 없으며 데이터와 교차하지 않습니다. 이 솔루션은 버스 인스턴스에 직접 데이터를 추가하는 단계를 하나 더 추가합니다. 그리고 이벤트 모니터링과 데이터 추가에 대한 사전 정의가 필요합니다.

  2. 데이터 수신자는 더 이상 $on을 사용하여 데이터 변경 사항을 학습하지 않고, 계산된 속성의 특성을 통해 수동적으로 수신합니다.

문제 해결

통신 구성요소가 동시에 존재해야 하나요? 데이터는 버스에 저장되므로 요구 사항이 없습니다.

여러 번 바인딩하시나요? 바인딩 모니터는 모두 버스에 있으며 반복적으로 바인딩되지 않습니다.

데이터는 $emit 이후에만 사용할 수 있나요? 계산된 속성을 사용하면 이벤트를 다시 트리거하지 않고 버스에 저장된 값을 직접 읽을 수 있습니다.

논의하기

계산된 속성을 사용하는 이유

사실 data1:bus.data1과 같이 데이터에 직접 추가할 수 없는 이유도 있어야겠죠? 또 다른 코드인 온라인 코드를 살펴보겠습니다. 버스를

data () {
 return {
  // 多一层结构
  val: {
   result: 0
  }
 }
},
created () {
 this.$on(&#39;update1&#39;, val => {
  console.log(&#39;触发1&#39;, i1++)
  this.val.result = val
 })
}
로그인 후 복사

로 변경합니다. 데이터 수신 구성 요소가

// template
data中获取直接修改值:{{dataResult}}
data中获取直接修改值的父层:{{dataVal}}
computed中依赖直接修改值:{{computedResult}}
// js
data () {
  return {
   // 获取直接修改值
   dataResult: bus.val.result,
   // 获取直接修改值的父层
   dataVal: bus.val
  }
 },
 computed: {
  computedResult () {
   // 依赖直接修改值
   return bus.val.result
  }
 }
로그인 후 복사

로 변경됩니다. 값을 직접 수정하는 데이터에는 동적으로 응답할 수 없음을 알 수 있습니다.

이벤트를 사용하는 이유

사실 $emit触发,使用 bus.val = 1없이 직접 값을 할당하는 것도 가능합니다. 그렇다면 이렇게 하면 어떨까요?

vuex의 단순화된 버전

사실 이 eventBus는 vuex의 단순화된 버전입니다. vue 문서에는 다음 구절이 있습니다.

구성 요소는 저장소 인스턴스에 속한 상태를 직접 수정할 수 없지만 저장소에 변경 사항을 알리기 위해 이벤트를 배포(디스패치)하는 작업을 실행해야 합니다. 이 계약의 장점은 매장에서 발생하는 모든 상태 변경을 기록할 수 있다는 것입니다.

store는 버스 인스턴스에 해당하고, 상태는 데이터에 해당하며, 작업은 이벤트에 해당하고, 파견은 $emit에 해당합니다. 동시에 vuex의 구성요소가 데이터를 얻는 방식은 계산된 속성을 통해서이므로 실제로 vuex 및 Flux 아키텍처를 이해하고 사용하는 것은 그리 어렵지 않죠?

위 내용은 모두를 위해 제가 정리한 내용입니다. 앞으로 모든 사람에게 도움이 되기를 바랍니다.

관련 기사:

Ajax 기술을 기반으로 진행률 표시줄을 사용하여 파일 업로드 구현

Ajax의 ReadyState 및 상태와 관련된 문제 논의

$.Ajax() 메소드 매개변수 종합 분석(그림 및 텍스트 튜토리얼)

위 내용은 Vue 데이터 전송--저는 특별한 구현 기술을 가지고 있습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿
회사 소개 부인 성명 Sitemap
PHP 중국어 웹사이트:공공복지 온라인 PHP 교육,PHP 학습자의 빠른 성장을 도와주세요!