Vue中的v-model非常好用,他帮我们简化了很多操作,如果不使用v-model应该怎么去实现同样的效果呢?
实现之前先了解一下v-model的知识,它是一个语法糖,如下:
<input type="text" v-model="name" />
其实等同于下面的代码:
<input type="text" :value="name" @input="name = $event.target.value" />
其实v-model就是定义了一个名为value的props和一个事件input,这样看来这样的方法可以直接应用到子组件上
简单实现一个子组件的v-model
<!-- 定义子组件 -->
<child-model v-model="name" />
<!-- 子组件 -->
<input type="text" :value="value" @input="$emit('input', $event.target.value)"
ok,大功告成 这样的话代码简介清晰,看着也舒服
再给大家推荐一个Vue中的.sync修饰符
<!-- 父组件内通过属性名后加.sync的方式去传递数据 -->
<child-model :title.sync="title" />
<!-- 子组件接受title后 使用$emit去更新父组件传递过来的属性值 -->
<input :value="title" @input="$emit('update:title', $event.target.value)" />
注:update:是固定的,后面加上我们要修改的属性明,第二个参数就是要修改的属性值
.sync的目的也是为了去简化代码,解决单项数据流的方法有很多种,具体使用哪种也是看自己的需求
