Vue EventBus 사용자 정의 구성요소 이벤트 전달 소개

이 글에서는 주로 Vue EventBus 커스텀 컴포넌트 이벤트 전달을 소개합니다. 컴포넌트 애플리케이션 구축은 Vue의 특징 중 하나입니다. 이번 글에서는 주로 데이터 메시징을 위한 EventBus를 소개하고 참고용으로 제공합니다.

머리말

컴포넌트 기반 애플리케이션 구축은 Vue의 특징 중 하나이므로 개발 효율성을 높이기 위해 Vue의 실제 개발 프로세스 중에 맞춤형 컴포넌트를 캡슐화해야 하는 경우가 많습니다. 대부분의 경우 구성 요소는 독립적으로 존재하지 않으며 필연적으로 상위 구성 요소 및 형제 구성 요소와 상호 작용합니다. 따라서 여기서는 구성 요소 데이터 상호 작용의 두 가지 방법인 EventBus와 상태 관리를 위한 Vuex 프레임워크 사용을 요약합니다.

부모와 자식 구성 요소 간의 데이터 상호 작용과 형제 구성 요소 간의 데이터 상호 작용이라는 두 가지 상호 작용 방법을 사용하겠습니다.

공간 제약으로 인해 이 기사에서는 주로 데이터 메시징을 위한 EventBus를 소개합니다. 상태 관리를 위한 Vuex 프레임워크의 사용은 다음 기사에서 소개됩니다.

사례 소개

이 장에는 많은 코드 예제가 포함되어 있어 독자가 쉽게 읽을 수 있도록 다음과 같은 디렉토리와 구성 요소를 소개합니다. 이 장에서는 주로 두 개의 하위 구성 요소와 하나의 상위 구성 요소를 사용합니다.

하위 구성 요소 파일 이름: SearchInput.vue 및 SearchItem.vue

상위 구성 요소 파일 이름: StateView.vue

디렉터리 구조 표시:

1. .vue

구성 요소 소개: onInput 메서드를 사용하여 입력 내용을 모니터링하고 입력 상자에 데이터를 전달하는 메서드를 호출하는 입력 상자입니다.

코드 표시:

<template>
 <p>
 <input placeholder="搜索内容" v-model="searchContent"/>
 </p>
</template>

<script type="text/ecmascript-6">
 export default{
 data(){
  return{
  searchContent:""
  }
 },
 props:{

 }
 }
</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>

SearchItem.vue

컴포넌트 소개: 주로 상위 컴포넌트가 전달한 내용과 형제 컴포넌트의 입력 상자가 전달한 내용을 수신하는 데 사용되는 스팬, 그리고 그것을 표시하십시오.

코드 샘플:

<template>
 <span class="item">
  {{content}}
 </span>
</template>

<script type="text/ecmascript-6">
 export default{
 data(){
  return{
  content:this.itemContent
  }
 },
 props:{
  itemContent:{
  type:String,
  required:true
  }
 }
 }
</script>

<style lang="stylus" rel="stylesheet/stylus">
 .item
 background #f4f4f4
 padding 3px 5px
 box-sizing border-box
 display inline-block
 cursor pointer
</style>

StateView.vue

구성 요소 소개: 주로 페이지를 표시하고 하위 구성 요소를 로드하는 상위 구성 요소

코드 샘플:

<template>
 <p>
 <search-view></search-view>
 <p>
  <search-item :itemContent="content"/>
  <search-item itemContent="热门搜索2"/>
  <search-item itemContent="热门搜索3"/>
 </p>
 <p>{{content}}</p>

 </p>
</template>

<script type="text/ecmascript-6">
import searchView from &#39;../components/SearchInput.vue&#39;
import searchItem from &#39;../components/SearchItem.vue&#39;

export default{
 data () {
 return {
  content:"接收输入框的值"
 }
 },
 components: {
 searchView,
 searchItem
 }
}

</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>

Text

EventBus

1. 상위 구성 요소는 하위 구성 요소props 自定义属性，去传递数据

2、EventBus其实就是通过实例化一个Vue实例，然后通过该实例的 $emit 方法发送数据消息和 $on 方法接收数据消息。它适用在子组件发送消息给父组件或子组件发送消息给兄弟组件。

我们看下一个下面案例主要展示了：

1、通过 props 父组件(StateView)去为子组件（SearchItem）传递数据；

2、子组件(SearchInput)通过 EventBus 和父组件(StateView)、兄弟组件(SearchItem)传递数据；

目录结构展示

 

效果展示

代码展示：（粗体表示变化部分）

 1、第一步：自定义一个EventBus（SearchEvent.js）

import Vue from 'Vue'
export default new Vue()

在这里我们 new 了一个Vue的实例，并将它输出。

第二步：子组件通过EventBus发送数据消息

<template>
 <p>
 <input placeholder="搜索内容" @input="sendEvent" v-model="searchContent"/> //增加了@input=“sendEvent”，去监听onInput事件，并回调sendEvent方法
 </p>
</template>

<script type="text/ecmascript-6">
 import searchEvent from &#39;../event/SearchEvent&#39;  //导入EventBus
 export default{
 data(){
  return{
  searchContent:""
  }
 },
 methods:{
  sendEvent:function(){  //定义sendEvent方法，在input中监听onInput，并回调该方法
   /**
   * 通过导入的searchEvent调用$emit方法去发送数据消息。
   * 第一个参数为事件名，到时候我们要通过该事件名去接收数
   * 第二个参数为数据值，如果只有一个参数，我们可以直接传递该参数
   * 如果有两个及以上的参数，我们可以通过对象的形式去传递。
   */
  searchEvent.$emit("search",this.searchContent)
  //多个参数传递的示例：
  //searchEvent.$emit("search",{"content":this.searchContent,"valTwo":"valTow"})
  }
 },
 props:{

 }
 }
</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>

在上面的示例我们主要做了以下事情： 1、导入EventBus

2、通过 @input="sendEvent" 去监听 onInput 事件，并发现输入框内内容有改变时，回调 sendEvent 方法，调用 EventBus.emit() 方法把数据消息发送出去

第三步父组件(StateView)和子组件(SearchItem)接收数据消息

StateView.vue

<template>
 <p>
 <search-view></search-view>
 <p>
  <search-item :itemContent="content"/> //通过props去为子组件传递（动态数据：content）数据
  <search-item itemContent="热门搜索2"/> //通过props去为子组件传递（固定数据：热门搜索2）数据
  <search-item itemContent="热门搜索3"/>
 </p>
 <p>{{content}}</p>

 </p>
</template>

<script type="text/ecmascript-6">
import searchView from &#39;../components/SearchInput.vue&#39;
import searchItem from &#39;../components/SearchItem.vue&#39;
import searchEvent from &#39;../event/SearchEvent&#39; //导入EventBus
export default{
 data () {
 return {
  content:"接收输入框的值"
 }
 },
 mounted(){
 /**
  * 在mounted接受数据消息，$on接受两个参数。
  * 第一个参数是消息事件名，应该与发送数据消息的第一个参数相同，否则接收不到数据消息
  * 第二个参数是一个函数，对数据消息事件做处理；该函数带一个参数，则是数据。
  */
 searchEvent.$on(&#39;search&#39;,(val)=>{
  this.content=val;
  //示例：如果数据传递的是对象形式
  // this.content=val.content;
 })
 },
 components: {
 searchView,
 searchItem
 }
}

</script>

<style lang="stylus" rel="stylesheet/stylus">

</style>

在上面的示例我们主要做了以下事情：

1、在父组件，我们通过SearchItem的 props 去传递了数据。

2、通过在组件 mounted 生命周期中调用 EventBus.on() 方法去接收子组件（SearchInput）的数据消息，并对content进行修改值

SearchItem.vue

<template>
 <span class="item">
  {{content}}
 </span>
</template>

<script type="text/ecmascript-6">
 import searchEvent from &#39;../event/SearchEvent&#39; //导入EventBus
 export default{
 data(){
  return{
  content:this.itemContent
  }
 },
 props:{
  itemContent:{
  type:String,
  required:true
  }
 },
 mounted(){
 /**
  * 在mounted接受数据消息，$on接受两个参数。
  * 第一个参数是消息事件名，应该与发送数据消息的第一个参数相同，否则接收不到数据消息
  * 第二个参数是一个函数，对数据消息事件做处理；该函数带一个参数，则是数据。
  */
  searchEvent.$on(&#39;search&#39;,(val)=>{
  this.content=val;
  })
 }
 }
</script>

<style lang="stylus" rel="stylesheet/stylus">
 .item
 background #f4f4f4
 padding 3px 5px
 box-sizing border-box
 display inline-block
 cursor pointer
</style>

在上面的示例我们主要做了一事情：

通过在组件 mounted 生命周期中调用 EventBus.on() 方法去接收子组件（SearchInput）的数据消息，并对content进行修改值。

我们可以感受到 SearchInput一发送数据消息，所有注册接收 search

2에 의해 정의된 props 사용자 정의 속성을 통해 데이터를 전달할 수 있습니다. 그런 다음 데이터 메시지는 인스턴스의 $emit 메서드를 통해 전송되고 $on 메서드를 통해 수신됩니다. 자식 컴포넌트가 부모 컴포넌트에게 메시지를 보내는 경우, 자식 컴포넌트가 형제 컴포넌트에게 메시지를 보내는 경우에 적용 가능합니다.

다음 사례를 살펴보겠습니다.

🎜🎜1. props 상위 구성 요소(StateView)를 통해 하위 구성 요소(SearchItem)에 데이터를 전달합니다. 하위 구성 요소(SearchInput))는 EventBus와 상위 구성 요소(StateView) 및 형제 구성 요소(SearchItem)를 통해 데이터를 전송합니다. 🎜🎜🎜디렉터리 구조 표시🎜🎜🎜 🎜🎜🎜효과 표시🎜🎜🎜🎜🎜🎜코드 표시: (굵은 글씨는 변경 사항을 나타냄)🎜🎜🎜🎜1. 1단계: EventBus 사용자 지정(Search.js)🎜 🎜 🎜🎜rrreee🎜🎜🎜여기서 Vue 인스턴스를 새로 생성하고 출력합니다. 🎜🎜🎜2단계: 하위 구성 요소는 EventBus를 통해 데이터 메시지를 보냅니다🎜🎜🎜🎜rrreee🎜🎜🎜위의 예에서는 주로 다음 작업을 수행했습니다. 1. @input=을 통해 EventBus 가져오기🎜🎜2. "sendEvent " onInput 이벤트를 수신하고 입력 상자의 내용이 변경된 것을 발견하면 sendEvent 메서드를 다시 호출하고 EventBus.emit() 데이터 메시지를 보내는 방법 🎜🎜🎜3단계 상위 구성 요소(StateView)와 하위 구성 요소(SearchItem)가 데이터 메시지를 받습니다 🎜🎜🎜StateView.vue🎜🎜🎜rrreee🎜🎜🎜에서 위의 예에서는 주로 다음 작업을 수행했습니다. 🎜🎜1. 상위 구성 요소에서는 SearchItem의 props를 통해 데이터를 전달했습니다. 🎜🎜2. mounted 컴포넌트 라이프 사이클에서 EventBus.on() 메서드를 호출하여 하위 컴포넌트(SearchInput)의 데이터 메시지를 수신하고 콘텐츠 값을 수정합니다🎜 🎜 SearchItem.vue🎜🎜🎜rrreee🎜🎜🎜위의 예에서 우리는 주로 한 가지 작업을 수행합니다: 🎜🎜구성 요소 마운트 라이프 사이클 > 메서드에서 EventBus.on()를 호출하여 하위 컴포넌트(SearchInput)의 데이터 메시지를 받아 콘텐츠 값을 수정합니다. 🎜🎜SearchInput이 데이터 메시지를 보내자마자 검색 이벤트를 수신하도록 등록된 모든 장소가 데이터 메시지를 받게 되는 것을 느낄 수 있습니다🎜🎜🎜리뷰: 🎜🎜

1. 상위 구성 요소는 props를 통해 하위 구성 요소에 데이터를 전달할 수 있습니다. props 进行传递。

2、子组件给父组件进行消息传递或子组件给兄弟组件进行消息传递可以通过EventBus去实例化一个Vue，并通过该实例的 $emit 和 $on

2. 하위 구성 요소가 상위 구성 요소에 메시지를 보내거나 하위 구성 요소가 형제 구성 요소에 메시지를 보낼 때 EventBus를 사용하여 Vue를 인스턴스화하고 인스턴스의 $emit 및 $on 메소드를 사용하여 데이터 메시지를 보내고 받습니다.

3. 데이터 메시지가 전송되면 데이터 메시지를 수신하도록 등록된 모든 장소에서 데이터 메시지를 받게 됩니다.

위 내용은 이 글의 전체 내용입니다. 모든 분들의 학습에 도움이 되었으면 좋겠습니다. 더 많은 관련 내용은 PHP 중국어 홈페이지를 주목해주세요!

관련 권장 사항:

Vue 주석 프레임워크 구현 정보(상위 구성 요소 구현)

Vue는 상단 backToTop을 반환하는 구성 요소를 구현합니다.

VUE 지역 선택기 정보(V -Distpicker)컴포넌트 사용법 소개

🎜

위 내용은 Vue EventBus 사용자 정의 구성요소 이벤트 전달 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!