Introduction to Vue EventBus custom component event delivery

This article mainly introduces Vue EventBus custom component event delivery. Component application construction is one of the characteristics of Vue. This article mainly introduces EventBus for data messaging. Now I share it with you and give it as a reference.

Preface

Component-based application construction is one of the characteristics of Vue, so we often need to encapsulate custom components during the actual development process of Vue to improve development s efficiency. In most cases, a component does not exist in isolation. It will inevitably interact with parent components and sibling components. So here we summarize two ways of component data interaction: EventBus and using the Vuex framework for state management.

I will use two different interaction methods, which are for data interaction between parent and child components and data interaction between sibling components.

Due to space constraints, this article mainly introduces EventBus for data messaging; the use of Vuex framework for state management will be introduced in the next article.

Case Introduction

This chapter will have a large number of code examples. In order to make reading easier for readers, the following directory and component introductions are made. This chapter mainly uses two child components and a parent component.

Child component file name: SearchInput.vue and SearchItem.vue

Parent component file name: StateView.vue

Directory structure display:

1. SearchInput.vue

component introduction : An input box, which uses the onInput method to monitor the input content and calls the method to pass the data in the input box.

Code display:

<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

Component introduction: a span, which is mainly used to receive the parent component The content passed and the content passed by the input box of the sibling component are received and displayed.

Code example:

<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

Component introduction: parent component, mainly displays pages and loads sub-components

Code example:

<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. The parent component sends data to the child component. You can pass the data through the

props custom properties defined by the child component

2. EventBus actually That is to instantiate a Vue instance, and then send data messages through the

$emit method of the instance and receive data messages through the $on method. It is applicable when a child component sends a message to a parent component or when a child component sends a message to a sibling component.

Let’s look at the following case, which mainly shows:

1. Use

props to set the sub-component (SearchItem) through the parent component (StateView) Pass data;

2. Subcomponent (SearchInput) passes data through

EventBus and parent component (StateView) and sibling component (SearchItem);

Directory structure Display

Effect display

Code display: (Bold Body representation changes)

1. Step 1: Customize an EventBus (SearchEvent.js)

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

Here we

new create an instance of Vue and output it.

Step 2: Subcomponent sends data message through 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>

In the above example we mainly did The following things: 1. Import EventBus

2. Use

@input="sendEvent" to listen to the onInput event, and call back when it is found that the content in the input box has changed. sendEvent method, call the EventBus.emit() method to send the data message

The third step is received by the parent component (StateView) and the child component (SearchItem) Data message

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>

In the above example we mainly did the following things:

1. In the parent component, we passed the data through

props of SearchItem.

2. By calling the

EventBus.on() method in the component mounted life cycle to receive the data message of the subcomponent (SearchInput) and modify the content Value

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>

In the above example we mainly do one thing:

By using the component

mounted Call the EventBus.on() method in the life cycle to receive the data message of the subcomponent (SearchInput) and modify the content value.

We can feel that as soon as SearchInput sends a data message, all places registered to receive

search events will receive the data message

Review:

1. The parent component can pass data to the child component through props.

2. When a child component passes a message to a parent component or a child component passes a message to a sibling component, you can use EventBus to instantiate a Vue and pass the $emit and ## of the instance. #$on Method to send and receive data messages.

3. Once the data message is sent, all places registered to receive the data message will receive the data message.

The above is the entire content of this article. I hope it will be helpful to everyone's study. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

About the implementation of Vue comment framework (implementation of parent component)

Vue implementation return to top backToTop Component

Introduction to the use of the VUE-region selector (V-Distpicker) component

The above is the detailed content of Introduction to Vue EventBus custom component event delivery. For more information, please follow other related articles on the PHP Chinese website!