<div id="app">  
  <div class="container">
    <h1>Component communication <small>Vue.js</small></h1>
    
    <div class="alert alert-info">
      Sibling components communication with a bus.
    </div>   
    
    <div class="row">
      <div class="col-xs-6">        
        <component1 label="Component-1" :message="message"></component1>        
      </div>
      <div class="col-xs-6">              
        <component2 label="Component-2"></component2>                
      </div>
    </div>   
  </div>
</div>  

<!-- Component 1 template -->
<script type="text/x-template" id="temp">
  <div class="frame-component">          
    <h3 class="component">{{ label }}</h3>
    <div class="form-group">
      <label for="message">Message</label>
      <input type="text" class="form-control" id="message" v-model="message">
    </div>
    <div class="form-group text-right">
    <button @click="sendMessage" class="btn btn-primary" :disabled="message==''">
      Send 
      <i class="fa fa-arrow-right"></i>
    </button>    
  </div>  
</script>

<!-- Component 2 template -->
<script type="text/x-template" id="temp2">
  <div class="frame-component">          
    <h3 class="component">{{ label }}</h3>
    <p><strong>Message</strong> <em>from Component-1:</em></p>
    <div class="alert alert-info">
      <strong>{{message}}</strong></p>
    </div>
    
    <div class="form-group text-right">
      <button @click="sendReset" class="btn btn-danger" :disabled="message==''">
        <i class="fa fa-arrow-left"></i> Reset
      </button>    
    </div>
  </div>  
</script>  

<div class="container-fluid footer text-center">    
  <p>A teljes cikket elolvashatod az ITHub-on. Klikkelj a logóra alább!</p>
  <p><em>You can read the Hungarian full article on the ITHub. Click the logo below!</em></p>
  <a href="https://ithub.hu/blog/post/Ismerkedes-a-Vuejs-keretrendszerrel---2-resz---Urlapok-komponensek/" target="ithub">
    <img src="https://ithub.hu/images/ithub-logo-dark.png" alt="ithub logo" style="width: 85px; height: auto;">    
  </a>  
</div>
h1 {
  color: #42b983;  
}

h3 {
  margin-top: 0px;
  margin-bottom: 5px;
  padding: 5px 10px;
  border-radius: 10px;
  color: white;
}

h3.component {
  background-color: #4283b9;   
}

h3.instance {
  background-color: #42b983;   
}


.frame-instance {
  border: 1px dashed #42b983;
  padding: 10px;
  margin: 10px;
}

.frame-component {
  border: 1px dashed #4283b9;
  padding: 10px;
  margin: 10px;  
  padding-bottom: 0px;
}

.btn.btn-primary {
  background-color: #42b983;
  border-color: #229963
}

a.danger {
  color: #AA0000;
}

a.danger:hover {
  color: #880000;
}

/** footer ***/

.container-fluid {  
  width: 100%;
  margin: 10px 0;
  clear: both;   
}

.footer {
  background-color: #1B1C1D;
  padding: 10px 10px;;
  color: white;
  font-size: 20px;
  font-family: arial;
  text-height: 40px;
  
  em {
    color: #aaa;  
  }
  
  a {
    display: inline-block;
    border: 1px solid #aaa;
    border-radius: 10px;
    padding: 10px;    
    color: #ddd;
    text-decoration: none;    
  }
}
// helper bus
var bus = new Vue();

// component-1
Vue.component('component1', {
  template: '#temp',   
  props: [ 'label', 'message' ],
  methods: {    
    sendMessage: function() {
      // trigger
      bus.$emit('getmsg', this.message);      
    }
  },
  created: function() {
    // listening
    bus.$on('resetmsg', function() {      
      this.message = '';
    }.bind(this))
  }
});

// component-2
Vue.component('component2', {
  template: '#temp2',  
  props: ['label'],
  data: function() {
    return {
      message: 'waiting for the message ...'      
    }
  },  
  methods: {
    // trigger reset
    sendReset: function() {
      this.message='';
      bus.$emit('resetmsg');      
    },    
  },  
  created: function() {   
      // listening
      bus.$on('getmsg', function(message) {
        this.message = message
      }.bind(this));
    }
});

// the vue instance
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hi! How are you?',    
  }
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css
  2. https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js