Vue

by Vince Oveson

HTML

<div id="app">
  <div class="line">
    Parent <code>current_room</code>: {{ current_room }}
  </div>
  <div class="line">
    <child :current-room="current_room"></child>
  </div>
</div>

CSS

#app {
  padding: 20px;
}

.line {
  margin-bottom: 5px;
}

code {
  background-color: #dddddd;
  color: #c10000;
  padding: 1px 4px;
  border-radius: 3px;
}

Vue

Vue.component('child', {
  props: ['currentRoom'],
  template: `<div>Child <code>currentRoom</code>: {{ currentRoom }}</div>`
});

new Vue({
  el: "#app",
  data: {
    current_room: {}
  },
  mounted() {
    setTimeout(() => {
      this.current_room = 1;
    }, 1000);
  }
})