preface

Componentized application construction is one of the characteristics of Vue, so we often need to encapsulate custom components in the actual development process of Vue to improve the efficiency of development. Components, for the most part, do not exist in isolation; they must interact with their parent and sibling components. There are two ways to interact with component data: EventBus and state management using the Vuex framework.

I’m going to use two different ways of interacting with data between parent and sibling components.

Due to space constraints, this article focuses on EventBus for data messaging; State management using the Vuex framework will be covered in the next article.

Vuex Framework introduction: Introduction to Vuex

Case introduced

There are plenty of code examples in this section, but the following table of contents and components are provided to make reading easier. This section mainly uses two child components and a parent component.

Subcomponent file names: searchinput.vue and searchItem.vue

Parent component file name: stateview.vue

Directory structure display:

1, SearchInput. Vue

Component description: an input box, it will onInput method to listen for input content, and call the method, the input box data passed out.

Code display:

<template>
  <div>
    <input placeholder="Search content"  v-model="searchContent"/>
  </div>
</template>

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

    }
  }
</script>

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

</style>


Copy the code

SearchItem.vue

Component introduction: A SPAN that receives content from the parent component and receives content from the sibling component’s input box and displays it.

Code examples:

<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>

Copy the code

StateView.vue

Component introduction: The parent component, mainly displays the page and loads the child components

Code examples:

<template>
  <div>
    <search-view></search-view>
    <div>
      <search-item :itemContent="content"/>
      <search-item itemContent="Hot Search 2"/>
      <search-item itemContent="Hot Search 3"/>
    </div>
    <div>{{content}}</div>

  </div>
</template>

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

export default{
  data () {
    return {
      content:"Receive the value of the input field"
    }
  },
  components: {
    searchView,
    searchItem
  }
}

</script>

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

</style>

Copy the code

The body of the

EventBus

1. The parent component sends data to its children, and can use the props property defined by the children to pass data

EventBus instantiates a Vue instance and sends data messages via its $emit method and receives data messages via its $ON method. It works when a child sends a message to a parent or a child sends a message to a sibling.

Let’s move on to the next one. The following example mainly shows:

1. Pass data to the SearchItem child component via the props parent component (StateView);

2. The child component (SearchInput) passes data through EventBus with its parent component (StateView) and sibling component (SearchItem);

Directory structure Display

Results show

Code presentation :(changes in bold)

1. Create an EventBus (searchEvent.js)

import Vue from 'vue'
export default new Vue()
Copy the code

Here we create an instance of Vue and print it out.

Step 2: The child component sends a data message through EventBus

<template>
  <div>
    <input placeholder="Search content" @input="sendEvent" v-model="searchContent"/> // added @input= "sendEvent" to listen for onInput events and call the sendEvent method </div> </template> <scripttype="text/ecmascript-6">
  import searchEvent from '.. /event/SearchEvent'/ / import the EventBusexport default{
    data() {return{
        searchContent:""
      }
    },
    methods:{
      sendEvent:function(){// define a sendEvent method that listens for onInput in input and calls back the method via the imported searchEvent$emitMethod to send a data message. * The first parameter is the event name, by which we will receive the number * the second parameter is the data value, if there is only one parameter, we can directly pass the parameter * If there are two or more parameters, we can pass the object. */ searchEvent.$emit("search",this.searchContent) // Examples of multiple parameter passing: //searchEvent.$emit("search", {"content":this.searchContent,"valTwo":"valTow"})
      }
    },
    props:{

    }
  }
</script>

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

</style>

Copy the code

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

If @input=”sendEvent” is used to listen for onInput events and the content of the input box is changed, the eventbus.emit () method will be called back to sendEvent

Step 3 The parent component (StateView) and child component (SearchItem) receive the data message

StateView.vue

<template>
  <div>
    <search-view></search-view>
    <div>
      <search-item :itemContent="content"/> // To pass (dynamic data: content) data to the subcomponent <search-item itemContent="Hot Search 2"/> // Pass (fixed data: hot search 2) data to the subcomponent <search-item itemContent="Hot Search 3"/>
    </div>
    <div>{{content}}</div>

  </div>
</template>

<script type="text/ecmascript-6">
import searchView from '.. /components/SearchInput.vue'
import searchItem from '.. /components/SearchItem.vue'
import searchEvent from '.. /event/SearchEvent'/ / import the EventBusexport default{
  data () {
    return {
      content:"Receive the value of the input field"}},mounted(){/** * mounted receives data messages.$onTake two arguments. The first argument is the name of the message event, which should be the same as the first argument that sent the data message, otherwise the data message will not be received. The second argument is a function that handles the data message event. The function takes one argument, which is data. */ searchEvent.$on('search',(val)=>{ this.content=val; // Example: If data is passed in object form // this.content=val.content; }) }, components: { searchView, searchItem } } </script> <style lang="stylus" rel="stylesheet/stylus">

</style>

Copy the code

In the above example we mainly did the following:

1. In the parent component, we pass data through props of the SearchItem.

In the Mounted life cycle of a component, call eventBus.on () to receive data messages from the child component (SearchInput) and modify the content

SearchItem.vue

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

<script type="text/ecmascript-6">
  import searchEvent from '.. /event/SearchEvent'/ / import the EventBusexport default{
    data() {return{
        content:this.itemContent
      }
    },
    props:{
      itemContent:{
        type:String,
        required:true}},mounted(){/** * mounted receives data messages.$onTake two arguments. The first argument is the name of the message event, which should be the same as the first argument that sent the data message, otherwise the data message will not be received. The second argument is a function that handles the data message event. The function takes one argument, which is data. */ searchEvent.$on('search',(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>

Copy the code

In the above example we mainly did one thing:

In the Mounted life cycle of a component, the eventBus.on () method is called to receive data messages from the child component (SearchInput) and modify the content.

We can feel SearchInput sending a data message, and all places registered to receive the search event will receive the data message

Analyse:

1. Data transmission from parent component to child component can be performed through props.

A Vue can be instantiated via EventBus and sent and received via the instance’s $emit and $ON methods.

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

My damai, please give me a careful heart if you like my article.