Vue 데이터 전송의 영리한 사용
- php中世界最好的语言원래의
- 2018-06-15 10:52:031171검색
이번에는 Vue 데이터 전송을 능숙하게 사용하는 방법을 알려드리겠습니다. Vue 데이터 전송을 능숙하게 사용하기 위한 주의사항은 무엇인가요? 다음은 실제 사례입니다.
머리말
최근 Vue의 eventBus에 관해 많은 질문을 받았습니다. 기술 선택을 결정할 때 Vuex와 eventBus의 사용 범위에 대한 질문도 받았습니다. 그러니 그냥 적어보세요. 동시에 특별한 구현 솔루션도 있습니다.
데이터 전송 방법에는 vuex, props, eventBus 및 특수 eventBus 등 여러 가지가 있습니다.
vuex
소개하지 않으면 데이터의 양과 복잡성이 감당하지 못할 경우에만 무시하게 됩니다.
props
demo
부모 및 자식 구성 요소는 값, 공식 API를 전달하고 데모를 작성하세요.
1. 상위 구성 요소
<son :info="info" @update="updateHandler"/>
// data
info: 'sendToSon'
// methods
updateHandler (newVal) {
this.info = newVal
}
2. 하위 구성 요소
// props
props: ['info']
// 向上传值，某个方法中使用
this.$emit('update', 'got')
부모가 하위 요소에 값을 전달합니다.->props 하위 요소가 상위 요소에 값을 전달합니다.-> 하위 구성 요소 바인딩 이벤트 콜백은 상위 구성 요소에 정의되어 있으며 하위 구성 요소는 이 이벤트를 트리거합니다. 자식 컴포넌트에서 부모 컴포넌트에 전달된 props를 직접 수정하는 것은 권장되지 않으므로 커스텀 이벤트를 사용해야 합니다.
제한 사항
상위-하위 구성 요소.
eventBus
demo
bus는 모두 가져온 버스 인스턴스입니다.
// bus
const bus = new Vue()
// 数据接收组件
// 当前组件接收值则
bus.$on('event1', (val)=>{})
// 数据发出组件
// 当前组件发出值则
bus.$emit('event1', val)
본질은 이벤트 바인딩의 미디어 역할을 하는 vue 인스턴스임을 알 수 있습니다. 데이터 통신을 위한 모든 경우에 사용하십시오.
두(여러) 파티가 같은 이름의 이벤트를 사용하여 소통합니다.
Problem
$emit은 $on이어야 합니다. 그렇지 않으면 이벤트가 모니터링되지 않습니다. 즉, 구성 요소에 대한 특정 동시 요구 사항이 있음을 의미합니다. (참고: 라우팅이 전환되면 새 라우팅 구성 요소가 먼저 생성된 다음 이전 라우팅 구성 요소가 삭제됩니다. 경우에 따라 이 두 라이프사이클을 별도로 작성할 수 있습니다. 이 질문을 참조하세요.)
$on은 구성 요소가 소멸된 후 자동으로 바인딩 해제되지 않습니다. 동일한 구성 요소가 여러 번 생성되면 이벤트가 여러 번 바인딩되고 $emit이 한 번 발생하므로 여러 응답이 필요하므로 추가 처리가 필요합니다. .
데이터는 "장기" 데이터가 아니므로 저장할 수 없습니다. $emit 후에만 적용됩니다.
그렇다면 더 적합한 솔루션이 있을까요?
특별 이벤트버스?
demo
먼저 코드, 온라인 코드를 살펴보겠습니다. 버스는 모두 수입된 버스 인스턴스입니다.
// bus
const bus = new Vue({
data () {
return {
// 定义数据
val1: ''
}
},
created () {
// 绑定监听
this.$on('updateData1', (val)=>{
this.val1 = val
})
}
})
// 数据发出组件
import bus from 'xx/bus'
// 触发在bus中已经绑定好的事件
bus.$emit('update1', '123')
// 数据接收组件
{{val1}}
// 使用computed接收数据
computed () {
val1 () {
// 依赖并返回bus中的val1
return bus.val1
}
}
는 다릅니다
정통적인 eventBus는 이벤트를 바인딩하고 트리거하는 데만 사용되며 데이터에 관심이 없고 데이터와 교차하지 않습니다. 이 솔루션은 버스 인스턴스에 직접 데이터를 추가하는 단계를 하나 더 추가합니다. 그리고 이벤트 모니터링과 데이터 추가에 대한 사전 정의가 필요합니다.
데이터 수신자는 더 이상 $on을 사용하여 데이터 변경 사항을 학습하지 않고, 계산된 속성의 특성을 통해 수동적으로 수신합니다.
문제 해결
통신 구성요소가 동시에 존재해야 하나요? 데이터는 버스에 저장되므로 요구 사항이 없습니다.
여러 번 바인딩하시나요? 바인딩 모니터는 모두 버스에 있으며 반복적으로 바인딩되지 않습니다.
데이터는 $emit 이후에만 사용할 수 있나요? 계산된 속성을 사용하면 이벤트를 다시 트리거하지 않고 버스에 저장된 값을 직접 읽을 수 있습니다.
논의하기
계산된 속성을 사용하는 이유
사실 data1:bus.data1과 같이 데이터에 직접 추가할 수 없는 이유도 있어야겠죠? 또 다른 코드인 온라인 코드를 살펴보겠습니다. 버스를
data () {
return {
// 多一层结构
val: {
result: 0
}
}
},
created () {
this.$on('update1', val => {
console.log('触发1', 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 아키텍처를 이해하고 사용하는 것은 그리 어렵지 않죠?
이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!
추천 도서:
위 내용은 Vue 데이터 전송의 영리한 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!