<div id="app">  
  <div class="container">
    <h1>Component communication <small>Vue.js</small></h1>
    <div class="alert alert-info">
      Component-1 and Component-2 components communicate with Vue Instance.
    </div>
    <Vue class="js"></Vue></h1>  
    <div class="row">
      <div class="col-xs-6">
        <div class="frame-component">
          <h3 class="component">Component-1</h3>
          <simple-comp :message="messageOne" @getmsg="messageOne = arguments[0]"></simple-comp>
        </div>
      </div>
      <div class="col-xs-6">
        <div class="frame-component">
          <h3 class="component">Component-2</h3>
          <simple-comp :message="messageTwo" @getmsg="messageTwo = arguments[0]"></simple-comp>        
        </div>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-offset-3 col-xs-6">
        <div class="frame-instance">
          <h3 class="instance">Vue instance</h3>          
          <table class="table table-hover table-striped">
            <tr>
              <td><var>messageOne</var> value: </td>
              <td>{{messageOne}}</td>
              <td><a href="#" class="danger" @click="messageOne=''"><i class="fa fa-trash"></i></a></td>
            </tr>
            <tr>
              <td><var>messageTwo</var> value: </td>
              <td>{{messageTwo}}</td>
              <td><a href="#" class="danger" @click="messageTwo=''"><i class="fa fa-trash"></i></a></td>
            </tr>          
          </table>
        </div>
      </div>
    </div>
  </div>
</div>  


<script type="text/x-template" id="temp">
  <div>
    <p>This is a component.</p>        
    <p>{{message}}</p>
    <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">
      Send <i class="fa fa-arrow-down"></i>
    </button>    
  </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;
}

.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;    
  }
}
Vue.component('simpleComp', {
  template: '#temp',  
  props: [ 'message' ],
  methods: {
    sendMessage: function() {
      this.$emit('getmsg', this.message);      
    }
  }
});

var vm = new Vue({
  el: '#app',
  data: {
    messageOne: 'My first message',
    messageTwo: 'My second message'
  }
});

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