Binding Props in VueJs Components

Passing data to VueJs components by binding data to props - http://coligo.io

by Saurabh Mimani

HTML

<script src="https://cdn.jsdelivr.net/vue/2.1.0/vue.js"></script>
<div id="app">
  <child :title="title" :author="author" :content="content"></child>
</div>

<template id="child">
<div>

	<h1>{{ compTitle }}</h1>
	<h4>{{ author }}</h4>
	<p>{{ content }}</p>
  </div>
</template>

JavaScript

var child = {
	template: '#child',
	props: ['title', 'author', 'content'],
  data: function(){
    return {
      compTitle: this.title
    }
  },
  watch:{
    title: function(newVal){
      this.compTitle = newVal;
    }
  }
}

var vm = new Vue({
  components: { child },
	el: '#app',
	data: {
		author: 'Johnnie Walker',
		title: 'Original text',
		content: 'A bunch of steps and a whole lot of content'
	},
  mounted () {
    this.title = "Updated in mount"
  }
});