JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<script src="https://unpkg.com/vue/dist/vue.js"></script>

<div id="app">
  <div>
    <h1>Parent</h1>
    <pre>
      {{message}}  
    </pre>
    <pre>
      {{messageObject}}  
    </pre>
    
    <child-component 
    v-bind:message-object="messageObject"    
    v-bind:message="message"></child-component>
  </div>  
</div>

<template id="child-component">
  <div>
    <h1>Child</h1>
    {{message}}
    {{messageObject}}
    <div>
      <button v-on:click="changeParentMessage">Change Message</button>
      <button v-on:click="changeParentMessageObject">Change Message inside MessageObject</button>      
    </div>
  </div>
</template>

JavaScript

Vue.component('child-component', {
	template: '#child-component',
  props: ['message', 'message-object'],
	methods: {
    changeParentMessage: function () {
			this.message = 'Hi' + new Date()
    },
    changeParentMessageObject: function () {
    	this.messageObject.message = 'Change Props!!' + new Date()
		}
  }
});
new Vue({
	el: '#app',
  data: function () {
  	return {
     message: 'hello',
     messageObject: {
     		message: 'hello from object' + new Date()
     }
		}
	}
})