Simple Multi-Component Vue

A simple Vue js app demonstrating multiple components.

by asemahle

HTML

<div id="app">
  <display-message
    v-bind:mode='mode'
    v-bind:msg='msg'
  ></display-message>
  <set-message v-on:change='msg=$event'></set-message>
  <set-mode v-on:change='mode=$event'></set-mode>
</div>

<template id='display-message'>
  <h1>The message is: {{msgView}}</h1>
</template>

<template id="set-message">
  <input type="text" v-model='value'>
</template>

<template id="set-mode">
  <fieldset id="options">
    <input type="radio" value="NORMAL" name="options" v-model='mode'> 
    Normal
    <input type="radio" value="LOUD" name="options" v-model='mode'> 
    Loud
  </fieldset>
</template>

Vue

const MODE = { NORMAL: 'NORMAL', LOUD: 'LOUD' }
const DEFAULTS = {
	MSG: "Change Me!",
  MODE: MODE.NORMAL,
}

Vue.component('display-message', {
	template: '#display-message',
  props: {
  	'msg': { required: true },
    'mode': { 
    	required: true,
      validator: (value) => Object.keys(MODE).indexOf(value) !== -1
    }
  },
  computed: {
  	msgView: function() {
    	if (this.mode === MODE.LOUD) {
      	return this.msg.toUpperCase()
      }
      return this.msg
    }
  }
})

Vue.component('set-message', {
	template: '#set-message',
  data: function() {
  	return {
    	value: DEFAULTS.MSG
    }
  },
  watch: {
  	value: function() {
    	this.$emit('change', this.value)
    }
  }
})

Vue.component('set-mode', {
	template: '#set-mode',
  data: function() {
  	return {
    	mode: DEFAULTS.MODE
    }
  },
  watch: {
  	mode: function() {
    	this.$emit('change', this.mode)
    }
  }
})


const app = new Vue({
	el: '#app',
  data: function() {
  	return {
    	mode: DEFAULTS.MODE,
      msg: DEFAULTS.MSG
    }
  }
})