웹 프론트엔드 JS 튜토리얼 Vue 컴포넌트 통신(자세한 튜토리얼)

Vue 컴포넌트 통신(자세한 튜토리얼)

Jun 07, 2018 am 11:52 AM
vue Vue 컴포넌트 통신 구성 요소

이 글에서는 주로 부모-자식 컴포넌트 통신, 부모-자식이 아닌 컴포넌트의 eventBus 통신, localStorage 또는 sessionStorage 사용, Vuex 사용 등 4가지 방법을 소개합니다. .공부하고 공부하세요.

머리말

우리 모두 알고 있듯이 vue는 jquery와 비교할 때 가장 큰 차이점 중 하나는 구성 요소 간의 통신입니다. 이 글의 초점은 처음 두 가지, 부모-자식 컴포넌트 통신과 eventBus 통신을 정리하는 것입니다. Vue 문서의 지침은 아직 약간 단순해서 처음에는 이해하지 못했습니다. parent-Child 구성 요소의 커뮤니케일 커뮤니케이션

  • eventbus 비 Parent-Child 구성 요소의 통신 구성 요소 커뮤니케이션을 구현하기 위해 로컬 캐시를 사용합니다 vuex 커뮤니케이션

  • 첫 번째 커뮤니케이션 방법 : 부모-자식 컴포넌트 통신
  • 부모 컴포넌트는 자식 컴포넌트에 데이터를 전달합니다

  • 부모 컴포넌트는 총 4가지 작업을 수행해야 합니다

1.'./son.js'에서 아들 가져오기 하위 구성 요소 son 소개 2 . 구성 요소에 모든 하위 구성 요소 이름 등록: {"son"} 3. 상위 구성 요소의 템플릿에 하위 구성 요소 적용 , <son></son>

4. 하위 구성 요소에 데이터를 전달해야 하는 경우 <son :num="number">< /son>

 // 1.引入子组件 
 import counter from './counter'
 import son from './son'
로그인 후 복사
// 2.在ccmponents里注册子组件
 components : {
 counter,
 son
 },
로그인 후 복사
// 3.在template里使用子组件
 <son></son>
로그인 후 복사
 // 4.如果需要传递数据,也是在templete里写
 <counter :num="number"></counter>
로그인 후 복사
하위 구성 요소는 한 가지 작업만 수행하면 됩니다.

1. props를 사용하여 데이터를 수락하고 데이터를 직접 사용할 수 있습니다.

2. 하위 구성 요소가 수신한 데이터는 사용할 수 없습니다. 수정될 수 있습니다. 정말로 수정해야 하는 경우 계산된 속성을 사용하거나 하위 구성 요소 데이터의 변수에 데이터를 할당할 수 있습니다import son from './son.js' 引入子组件 son

2.在components : {"son"} 里注册所有子组件名称

3.在父组件的template应用子组件, <son></son>

4.如果需要传递数据给子组件,就在template模板里写 <son :num="number"></son>

 // 1.用Props接受数据
 props: [
  'num'
  ],
로그인 후 복사
// 2.如果需要修改得到的数据,可以这样写
 props: [
  'num'
 ],
 data () {
 return {
  number : this.num
 }
 },
로그인 후 복사
// 1. 在templete里应用子组件时,定义事件changeNumber
 <counter :num="number"
   @changeNumber="changeNumber"
 >
 </counter>
로그인 후 복사
// 2. 用changeNumber监听事件是否触发
 methods: {
  changeNumber(e){
  console.log('子组件emit了',e);
  this.number = e
  },
 }
로그인 후 복사

子组件只需要做1件事

1.用props接受数据,就可以直接使用数据

2.子组件接受到的数据,不能去修改。如果你的确需要修改,可以用计算属性,或者把数据赋值给子组件data里的一个变量

// 1. 子组件在数据变化后,用$emit触发即可,第二个参数可以传递参数
 methods: {
  increment(){
   this.number++
   this.$emit('changeNumber', this.number)
  },
 }
로그인 후 복사
// 1.在main.js里给app组件,添加bus属性
import Vue from 'vue'
new Vue({
 el: '#app',
 components: { App },
 template: '<App/>',
 data(){
 return {
 Bus : new Vue()
 }
 }
})
로그인 후 복사

子组件向父组件传递数据

父组件一共需要做2件事情

在template里定义事件

在methods里写函数,监听子组件的事件触发

// 2.在组件1里,触发emit
increment(){
 this.number++
 this.$root.Bus.$emit('eventName', this.number)
 },
로그인 후 복사
// 3.在组件2里,监听事件,接受数据
mounted(){
 this.$root.Bus.$on('eventName', value => {
 this.number = value
 console.log('busEvent');
 })
},
로그인 후 복사

子组件一共需要1件事情

在数据变化后,用$emit触发即可

rrreee

第二种通信方式: eventBus

eventBus这种通信方式,针对的是非父子组件之间的通信,它的原理还是通过事件的触发和监听。

但是因为是非父子组件的关系,他们需要有一个中间组件来连接。

我是使用的通过在根组件,也就是#app组件上定义了一个所有组件都可以访问到的组件,具体使用方式如下

使用eventBus传递数据,我们一共需要做3件事情

      1.给app组件添加Bus属性 (这样所有组件都可以通过this.$root.Bus访问到它,而且不需要引入任何文件)

      2.在组件1里,this.$root.Bus.$emit触发事件

      3.在组件2里,this.$root.Bus.$on监听事件

rrreeerrreeerrreee

第三种通信方式: 利用localStorage或者sessionStorage

这种通信比较简单,缺点是数据和状态比较混乱,不太容易维护。

通过window.localStorage.getItem(key) 获取数据

通过window.localStorage.setItem(key,value) 存储数据

注意:JSON.parse() / JSON.stringify() rrreeerrreee

하위 구성 요소는 상위 구성 요소에 데이터를 전달합니다상위 구성 요소는 합계를 수행해야 합니다. of 2 things

템플릿에서 이벤트 정의

하위 구성 요소의 이벤트 트리거를 수신하는 메서드에 함수를 작성하세요

rrreeerrreee

하위 구성 요소에는 총 1가지가 필요합니다

데이터가 변경된 후 다음을 사용하세요. $emit to start

rrreee

두 번째 통신 방법: eventBus

eventBus는 부모가 아닌 구성 요소와 자식 구성 요소 간의 통신을 목표로 하는 통신 방법으로, 여전히 이벤트의 트리거링과 모니터링을 통해 이루어집니다.

그러나 상위-하위 구성 요소가 아니기 때문에 이를 연결하려면 중간 구성 요소가 필요합니다.

루트 컴포넌트인 #app 컴포넌트에 모든 컴포넌트가 접근할 수 있는 컴포넌트를 정의하여 사용합니다. 구체적인 사용법은 다음과 같습니다🎜🎜eventBus를 사용하여 데이터를 전송하는데 총 3가지 작업을 해야 합니다. things🎜🎜 1. 앱 구성 요소에 버스 속성을 추가합니다(모든 구성 요소가 this.$root.Bus를 통해 액세스할 수 있고 파일을 추가할 필요가 없도록)🎜🎜 2. 구성 요소 1에서 this.$root.Bus.$emit는 이벤트 🎜🎜를 트리거합니다. 3. 구성 요소 2에서 this.$root.Bus.$on은 event 🎜rrreeerrreeerrreee🎜🎜🎜세 번째 유형 통신 방법: localStorage 또는 sessionStorage 사용🎜🎜🎜🎜이런 종류의 통신은 상대적으로 간단합니다. 단점은 데이터와 상태가 혼란스럽고 유지 관리가 쉽지 않다는 것입니다. 🎜🎜window.localStorage.getItem(key)를 통해 데이터 가져오기 🎜🎜window.localStorage.setItem(key,value)를 통해 데이터 저장 🎜🎜🎜참고: 🎜🎜데이터 형식 변환에는 JSON.parse() / JSON.stringify() 를 사용하세요. 🎜🎜🎜🎜네 번째 의사소통 방법: Vuex를 사용하는 방법🎜🎜🎜🎜Vuex는 더 복잡하므로 별도의 기사를 작성할 수 있습니다.🎜🎜위 내용은 제가 모두를 위해 정리한 내용이므로 앞으로 모든 분들께 도움이 되기를 바랍니다. 🎜🎜관련 기사: 🎜🎜🎜SpringMVC를 사용하여 vue 도메인 간 요청 해결🎜🎜🎜🎜webpack 4.0.0-beta.0 버전의 새로운 기능(자세한 튜토리얼)🎜🎜🎜🎜vue2에서 가치 전송 및 통신을 구현하는 방법 .0 구성 요소 🎜🎜

위 내용은 Vue 컴포넌트 통신(자세한 튜토리얼)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

뜨거운 기사 태그

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

vue에서 echart를 사용하는 방법 vue에서 echart를 사용하는 방법 May 09, 2024 pm 04:24 PM

vue에서 echart를 사용하는 방법

vue에서 내보내기 기본값의 역할 vue에서 내보내기 기본값의 역할 May 09, 2024 pm 06:48 PM

vue에서 내보내기 기본값의 역할

Vue에서 지도 기능을 사용하는 방법 Vue에서 지도 기능을 사용하는 방법 May 09, 2024 pm 06:54 PM

Vue에서 지도 기능을 사용하는 방법

vue에서 이벤트와 $event의 차이점 vue에서 이벤트와 $event의 차이점 May 08, 2024 pm 04:42 PM

vue에서 이벤트와 $event의 차이점

vue에서 내보내기와 내보내기 기본값의 차이점 vue에서 내보내기와 내보내기 기본값의 차이점 May 08, 2024 pm 05:27 PM

vue에서 내보내기와 내보내기 기본값의 차이점

vue에서 onmounted의 역할 vue에서 onmounted의 역할 May 09, 2024 pm 02:51 PM

vue에서 onmounted의 역할

vue의 이벤트 수정자를 어떤 시나리오에 사용할 수 있나요? vue의 이벤트 수정자를 어떤 시나리오에 사용할 수 있나요? May 09, 2024 pm 02:33 PM

vue의 이벤트 수정자를 어떤 시나리오에 사용할 수 있나요?

Vue의 후크는 무엇입니까 Vue의 후크는 무엇입니까 May 09, 2024 pm 06:33 PM

Vue의 후크는 무엇입니까

See all articles