JSFiddle - React, Tailwind, and code Playground

by ChangJoo Park

HTML

<script src="https://unpkg.com/[email protected]"></script>

<div id="app">
  <div>
    <h1>Parent</h1>
    <div>
      <input type="text" v-model="message"> <br>
      {{message}}
    </div>
    <hr>
    <div>
      Child Wrapper (Parent Scope)
      <child-component 
      v-bind:parent-message="message"
      v-on:update-message="updateMessage"  
      ></child-component>
    </div>
  </div>
</div>

<template id="child-component">
  <div>
    <h1>Child</h1>
    <div>
      {{parentMessage}} <br>
      <input type="text" v-model="childMessage"><br> 
      <button @click="sendMessageToParent">Update Parent Message</button>
    </div>
  </div>
</template>

JavaScript

var ChildComponent = {
	template: '#child-component',
  props: ['parent-message'],
  created: function () {
  	this.childMessage = this.parentMessage
	},
  data: function () {
  	return {
    	childMessage: ''
    }
  },
  methods: {
  	sendMessageToParent: function () {
    	this.$emit('update-message', this.childMessage)
    }
  }
}

new Vue({
	el: '#app',
  data: function () {
  	return {
    	message: 'default message'
    }
  },
  components: {
  	'child-component': ChildComponent
  },
  methods: {
  	updateMessage: function (childMessage) {
    	this.message = childMessage
    }
  }
})