Vue.js Component Props

by Pankaj Kargirwar

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/1.0.24/vue.min.js"></script>
<div id="demo">

    <some-component :n="value" v-on:clicked="onClick"></some-component>

</div>

<script id="component_template" type="x-template">
	<button @click="onClick">CLick</button>
	<div>Component {{n}}</div>
</script>

JavaScript

Vue.component('some-component', {
    props: ['n'],
    template: '#component_template',
    ready: function() {
      this.on_some_event();
    },
    methods: {
       on_some_event: function() {
       	  console.log('Component: ' + this.n);
       },
       onClick: function() {
       		this.$emit('clicked');
       }
    },
    watch: {
    	n: function() {
      	console.log('changed');
      }
    },
   
});
            
var demo = new Vue({
  el: '#demo',
  data: {
  	'value': 'this'
  },
  created: function() {
  	setTimeout(() => {
    	this.value = 'that';
    }, 3000);
  },
  methods: {
  	onClick: function() {
    	console.log("onClick");
    	this.value = "back to this"
    }
  }
  
});