JSFiddle - React, Tailwind, and code Playground

by edith_tang

HTML

<div id="app">
  妈妈问女儿：快吃饭了，你老公人呢？<my-component></my-component>
  <p>
  {{ message }}
  </p>
  <br>
  <button @click="handleBroadcast">男子下车敲门</button>
</div>

JavaScript

Vue.component('my-component', {
	template: '<div><button @click="handleDispatch">拨通老公电话</button><p>{{ reply }}</p></div>',
  methods: {
  	handleDispatch: function() {
    	this.$dispatch('on-message', '女婿接听电话: 我得晚了，今天这堵车！')
    }
  },
  data: function() {
  	return {
    	reply: ''	
    }
  },
  events: {
  	'on-reply': function(rply) {
    	this.reply = rply;
    }
  }
})

var app = new Vue({
	el: '#app',
  data: {
  	message: ''
  },
  events: {
  	'on-message': function(msg) {
    	this.message = msg;
    }
  },
  methods: {
  	handleBroadcast: function() {
    	this.$broadcast('on-reply', '丈母娘开门说道：哎呀，可算来了，赶紧进来，我去把菜热热！')
    }
  }
})