JSFiddle - React, Tailwind, and code Playground

by Alex Babakhanov

HTML

<script src='https://unpkg.com/[email protected]/dist/vue.js'></script>

<div id='app'>
  <user-cmp1 @changed='userName = $event' :user='userName'></user-cmp1>
  <user-cmp2 @changed='userName = $event' :user='userName'></user-cmp2>
  <user-cmp3 @changed='userName = $event' :user='userName'></user-cmp3>
</div>

JavaScript

UserCmp1 = {
  props: ['user'],
  template: '<div><p>{{user}}</p><button @click="changeName">Change</button></div>',
  methods: {
    changeName: function(){
      var user = 'Just a user ' + +new Date();
      this.$emit('changed', user);
    }
  }
};

UserCmp2 = {
  props: ['user'],
  template: '<div><p>{{user}}</p><button @click="changeName">Change</button></div>',
  methods: {
    changeName: function(){
      var user = 'Hello world';
      this.$emit('changed', user);
    }
  }
};

UserCmp3 = {
  props: ['user'],
  template: '<div><p>{{user}}</p><button @click="changeName">Change</button></div>',
  methods: {
    changeName: function(){
      var user = 'At least a user ' +  +new Date();
      this.$emit('changed', user);
    }
  }
};

new Vue({
  el: '#app',
  components: {
    userCmp1: UserCmp1,
    userCmp2: UserCmp2,
    userCmp3: UserCmp3
  },
  data: {
    userName: 'Initial name'
  }
});