10. component

by donggyu04

HTML

<div id="app">
  <input v-model="inputValue"/><br/>
  <input :value="inputValue" @input="e => inputValue = e.target.value"/>
  <div v-text="inputValue"></div><br/>

  <my-input v-model="myInputValue"></my-input>
  <div v-text="myInputValue"></div><br/>

  <my-checkbox v-model="isChecked"></my-checkbox>
  <my-checkbox :checked="isChecked" @change="val => isChecked = val"></my-checkbox>
  
  <div v-text="isChecked"></div>
</div>

<template id="my-input">
  <div>
    <input v-model="content" @input="handleInput"/>
  </div>
</template>

<template id="my-checkbox">
   <div>
     <input type="checkbox" v-model="checkValue" @change="changeValue"/>
   </div>
</template>

Vue

Vue.component('my-checkbox', {
	template: '#my-checkbox',
  model: {
    prop: 'checked',
    event: 'change'
  },
  props: ['checked'],
  data: function() {
  	return {
    	checkValue: this.checked,
    };
  },
  methods: {
  	changeValue: function() {
    	this.$emit('change', this.checkValue);
    },
  },
});

Vue.component('my-input', {
	template: '#my-input',
    model: {
    prop: 'checked',
    event: 'change'
  },
  props: ['value'],
  data: function() {
  	return {
    	content: this.value,
    };
  },
  methods: {
  	handleInput: function() {
    	this.$emit('input', this.content);
    },
  },
});

new Vue({
	data: {
  	isChecked: true,
    inputValue: 'input initial value',
    myInputValue: 'my input value',
  },
}).$mount('#app');