rayterrill/vueComponentWithProps.js

## vueComponentWithProps.js
<html>

<!-- define the binding point for our vue app -->
<div id="app">
   <!-- use our component, and bind the prop token to the data token from our root app definition -->
   <todo-item v-bind:token="token"></todo-item>
   <h1>{{ test() }}</h1>
</div>

<!-- production version, optimized for size and speed -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<script type="text/javascript">
// Define a new component called todo-item
Vue.component('todo-item', {
  props: ['token'], //token is an input to our component
  template: '<li>{{ token }}</li>' //using our prop in our component
})

var app = new Vue({
  el: '#app',
  data: {
     token: 'This is something passed to our component' //this is the initial setting for the token variable
  },
  created () {
     _this = this; //ugh - save a reference to this so we can update our root data
     setTimeout(function(){ _this.token = 'THIS IS THE CHANGED TOKEN'; }, 3000); //fake a call to a slow api to update the value of token
  },
  methods: {
     test() {
        return this.token;
     }
  }
})
</script>

</html>
	<html>

	<!-- define the binding point for our vue app -->
	<div id="app">
	<!-- use our component, and bind the prop token to the data token from our root app definition -->
	<todo-item v-bind:token="token"></todo-item>
	<h1>{{ test() }}</h1>
	</div>

	<!-- production version, optimized for size and speed -->
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>

	<script type="text/javascript">
	// Define a new component called todo-item
	Vue.component('todo-item', {
	props: ['token'], //token is an input to our component
	template: '<li>{{ token }}</li>' //using our prop in our component
	})

	var app = new Vue({
	el: '#app',
	data: {
	token: 'This is something passed to our component' //this is the initial setting for the token variable
	},
	created () {
	_this = this; //ugh - save a reference to this so we can update our root data
	setTimeout(function(){ _this.token = 'THIS IS THE CHANGED TOKEN'; }, 3000); //fake a call to a slow api to update the value of token
	},
	methods: {
	test() {
	return this.token;
	}
	}
	})
	</script>

	</html>