自定义Vue中v模块双向绑定的实现

事实上，v-module的双向绑定是通过子组件中的$emit方法调度输入事件，父组件监听输入事件中传递的值并将其存储在父组件数据中；然后父组件将值以prop的形式传递给子组件，再将子组件与input的value属性绑定。

让我们重新开始意识到这一点：

子组件价值转移

首先，子组件需要一个输入标记，该标记需要绑定到输入事件，并且$emit触发父组件的输入事件。这样，子组件将值传递给父组件

输入类型=' text' @ input=' $ emit ('input '，$ event。目标。value)'父组件侦听输入事件，然后将事件携带的输入输入的值传递到数据状态

my-comp @ input=' value=$ event '/my-comp导出默认值{//.data () {return {value: '初始值'/保持值状态}}}当子组件监听输入事件时，用户输入字符串可以由父组件获取并保存在数据状态。

父组件传递值

然后父组件还需要将值传递给子组件，然后子组件将值绑定到输入的value属性

my-comp :value='value ' @ input=' value=$ event '/my-comp添加： value=' value '通过prop传递值

子组件中绑定输入的value属性

输入类型=' text' @ input=' $ emit ('input '，$ event。target . value)' : value=' value '注意需要在道具中设置值

导出默认值{name:' my comp '，prop :[' value ']}用户定义的v模块已被处理。看效果：

其他元素使用v型

对输入使用v-model相对简单，但考虑到其他元素不一定要监听输入事件而是改变事件，改变元素内容的不一定是value属性。例如，checkbox，我们需要监听变更事件和选中的属性。

然后首先手动实现它：

输入类型=' checkbox ' @ change=' $ emit(' change '，$ event。目标。checked)' : checked=' checked '子组件首先侦听变更事件，而$ emit方法触发父组件的变更事件，并将检查的属性值传递给父组件。同时接收父组件传递的校验值，根据校验值确定输入元素的校验属性。

Exportdefault { name: ' mycomp '，prop 3360[' checked ']}然后需要修改父组件：

my-comp @ change=' checked=$ event '/my-comp导出默认值{//.data(){ return { checked : false } } }父组件侦听更改事件，并保持数据的检入状态，默认值为false。

最后，看看效果：

直接使用v型指令

此外，还可以直接使用v-model命令：

my-comp v-model=' checked '/my-comp

但是，有必要修改组件中的v-model指令，并指定prop和event:

导出默认{name :' my comp '、prop :[' checked ']、model : {prop3360' checked '、event :' change'}}这些就是本文的全部内容，希望对大家的学习有所帮助，多多支持我们。