title: how to emit a value with a click event in vue.js
body: <p>I am following Vuejs documentation and trying to emit a value with click event.</p>
  
  <p>The code follows:</p>
  
  <p><strong>Vue Template:</strong></p>
  
  <pre><code>&lt;div id="app"&gt;
      &lt;div class="container"&gt;
          &lt;div class="col-lg-offset-4 col-lg-4"&gt;
              &lt;sidebar v-on:incrementBtn="increment += $event"&gt;&lt;/sidebar&gt;
              &lt;p&gt;{{ increment }}&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Vue instances:</strong></p>
  
  <pre><code>    Vue.component('sidebar',{
          template:`
              &lt;div&gt;
                  &lt;button class="btn btn-info" v-on:click="$emit('incrementBtn', 1)"&gt;Increment on click&lt;/button&gt;
              &lt;/div&gt;
          `,
      });
  
      new Vue ({
          el:'#app',
          data:{
              increment:0
          }
      });
  </code></pre>