vue input组件这样写对么，好像绕了弯路？

Question

写了几个表单页面之后发现把input封装起来好像可以节省代码量，然后就找了一些例子，自己写了一个，但是好像不太对劲，帮我看看吧

input组件：
<template>

<li>
    <h5>{{ title }}</h5>
    <input :type="type" @input="$emit('update',keys,$event.target.value)" :value="value" name="" :id="id" :placeholder="placeholder" />
</li>    

</template>

<script>
export default {

name: 'LiInput',
props: ['title','type','id','placeholder','keys','value']

}
</script>

父组件调用：
<LiInput id="age" placeholder="请输入年龄" type="number" title="年龄" keys="age" :value="age" @update="update" />

父组件的data：{

age: 18

}
父组件的update方法：
update: function(key,value){

this.$data[key] = value;
console.log(this.$data[key])

}

问题在于，这样，我需要手动的修改age的值，如果不需要update就可以修改age该怎么做？

Answer 1

https://www.jianshu.com/p/6b0...
运用.sync

父组件<LiInput :value.sync="age"/>

子组件 <input :value="value" @input="$emit('update:value',$event.target.value)" />