Vue 비상위-하위 구성요소에서 값 전송 및 이벤트 버스(eventbus) 사용 소개

이 기사에서는 Vue 비부모-자식 구성 요소의 값 전송 및 이벤트 버스(eventbus) 사용에 대해 소개합니다. 필요한 친구들이 참고할 수 있기를 바랍니다. 당신에게.

먼저 실제로 구독 게시자 모델인 이벤트 버스가 무엇인지 이야기해 보겠습니다.

예를 들어 이 객체에는 두 가지 메서드가 있습니다. 하나는 on(모니터링, 즉 구독)입니다. ), 다른 하나는 방출(트리거링, 즉 게시)입니다. on 메소드를 통해 이벤트를 수신한 다음, 방출을 사용하여 이벤트를 트리거하고 동시에 on에서 콜백 함수를 호출하여 이벤트를 완료합니다.

이것은 디자인 패턴이고 언어는 중요하지 않습니다.

구독 게시자 패턴이 무엇인지 잘 모르신다면 이 글로 넘어가세요. JavaScript 디자인 패턴 - 관찰자 패턴(publisher- 구독자 패턴)

실제 개발에서 가장 문제가 되는 경우가 많습니다. 문제는 다양한 구성 요소 간의 값 전송입니다. 이벤트 버스를 사용하면 이 문제가 매우 간단해집니다.

vue에는 이벤트 자체의 단점이 있습니다. bus

우리는 vue가 인스턴스화되면 이벤트 버스 객체로 작동할 수 있는 능력이 있고 $emit과 $on이라는 두 가지 메서드가 있다는 것을 모두 알고 있습니다.

vue 문서에서는 $ 내보내기는 현재 인스턴스에서 이벤트를 트리거하며 추가 매개변수가 리스너 콜백에 전달됩니다.

실제 작업에서는 구성 요소 형태로 개발하므로 각 구성 요소는 인스턴스입니다.

따라서 사용에는 큰 제한이 있습니다. Vue의 버스 기능은 최대 하위 구성요소에서 상위 구성요소로만 트리거될 수 있지만 상위 구성요소와 하위 구성요소 간에 값을 전달할 수는 없습니다.

그래서 지금은 전역 이벤트가 필요합니다. 버스 객체를 사용하여 이벤트 수신 및 트리거를 수행할 수 있습니다.

예를 들어, 하위 구성 요소가 상위 구성 요소에 값을 전달하는 것은 매우 간단합니다. 여기에 대해

// 子组件中
<template>
  <div>
    <span>{{child}}</span>
    <input type="button" value="点击触发" @click="send">
  </div>
</template>
<script>
  export default {
    data () {
      return {
        child: '我是子组件的数据'
      }
    },
    methods: {
      send () {
      // 如果传多个值就用逗号隔开 a, b, c
        this.$emit('fromChild', this.child)
      }
    }
  }
</script>

// 父组件
<template>
  <div>
    <span>{{name}}</span>
    // 在父组件中监听 fromChild事件
    <child @fromChild="onFromChild"></child>
  </div>
</template>
<script>
  import child from './child'
  export default {
    components: {
      child
    },
    data () {
      return {
        name: ''
      }
    },
    methods: {
      onFromChild: function (data) {
        // data就是子组件传过来的值
        // 如果传过来多个值就用逗号隔开去接收 data1, data2, data3
        this.name = data
      }
    }
  }
</script>

글로벌 이벤트 버스 객체를 구현하는 여러 가지 방법

방법 1도 제가 직접 사용하는 방법입니다. 방법(권장, 단순)

일반적인 아이디어는 다음과 같습니다. vue의 프로토타입에 버스 객체를 추가합니다.

구체적인 구현 방법은 다음과 같습니다.

아래 컴포넌트 A와 컴포넌트 B는 프로젝트의 두 컴포넌트 중 하나일 수 있습니다.

//在mian.js中
Vue.prototype.bus = new Vue()  //这样我们就实现了全局的事件总线对象

//组件A中，监听事件
this.bus.$on('updata', function(data) {
    console.log(data)  //data就是触发updata事件带过来的数据
})

//组件B中，触发事件
this.bus.$emit('updata', data)  //data就是触发updata事件要带走的数据

방법 2는 약간 번거롭지만 또한 이해하기 쉽습니다

일반적인 구현 아이디어: 새 bus.js 파일을 생성하고 이 파일에서 vue를 인스턴스화한 다음 이 bus.js 파일을 각각 구성 요소 A와 구성 요소 B에 도입하고 이벤트 모니터링 및 이벤트 트리거링을 중지합니다. 전역 모니터링 및 트리거링이 가능하도록

예제 작성

bus.js 파일

// bus.js文件
import Vue from 'vue'
export default new Vue()

Component A

// 组件A ，监听事件send
<template>
  <div>
    <span>{{name}}</span>
  </div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    data () {
      return {
        name: ''
      }
    },
    created() {
      let _this = this
      // 用$on监听事件并接受数据
      Bus.$on('send', (data) => {
        _this.name = data
        console.log(data)
      })
    },
    methods: {}
  }
</script>

Component B

// 组件B， 触发事件send
<template>
  <div>
    <input type="button" value="点击触发" @click="onClick">
  </div>
</template>
<script>
  import Bus from './bus.js'
  export default {
    data () {
      return {
        elValue: '我是B组件数据'
      }
    },
    methods: {
        // 发送数据
      onClick() {
        Bus.$emit('send', this.elValue)
      }
    }
  }
</script>

이렇게 해서 다음과 같은 작업을 완료했습니다. 상위가 아닌 구성 요소와 하위 구성 요소 간의 간단한 값 전송.

위 내용은 Vue 비상위-하위 구성요소에서 값 전송 및 이벤트 버스(eventbus) 사용 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!