title: Vue js sending data between components
body: <p>I would like to know how I can send data between two components. So I would like to send to another component the dynamic value which is rendered on selectedBase.price, and be rendered on another component. I've tried with props but not succeed.</p>
  
  <pre><code>&lt;v-layout row wrap primary-title v-for="base in bases" :key="base.id"&gt;
          &lt;v-layout column&gt;
              &lt;v-flex xs6 offset-xs3&gt;
                  &lt;v-avatar size="80px" class="grey lighten-1"&gt;
                      &lt;img :src="base.href" :class="{selected: selectedBase.id == base.id}" @click="selectedBase = base" alt="avatar"&gt;
                  &lt;/v-avatar&gt;
              &lt;/v-flex&gt;
          &lt;/v-layout&gt;
          &lt;v-layout column&gt;
              &lt;v-flex xs6 offset-xs4&gt;
                  &lt;v-subheader&gt;{{base.name}} {{base.price}}€ {{selectedBase.price}}&lt;/v-subheader&gt;
              &lt;/v-flex&gt;
          &lt;/v-layout&gt;
      &lt;/v-layout&gt;
  
  &lt;script&gt;
  
  export default {
  
      data() {
              return {
                  selectedBase: {},
                  bases: [{
                      id: 1,
                      name: "black",
                      price: 4,
                      href: "../../static/black.jpg"
                  }, {
                      id: 2,
                      name: "white",
                      price: 6,
                      href: "../../static/white.jpg"
                  }]
              }
          },
          computed: {
  
              totalBase: function() {
                  var totalBase = 0;
                  for (var i = 0; i &lt; this.bases.length; i++) {
                      if (this.bases[i].selected) {
                          totalBase += this.bases[i].price;
                      }
                  }
                  return totalBase;
              }
          },
          methods: {
              getSelectedBase() {
                  return this.selectedBase;
              }
          }
  }
  
  &lt;/script&gt;
  </code></pre>