1. 首页
  2. 编程语言
  3. Javascript
  4. 自定义Vue中的v-module双向绑定的实现

自定义Vue中的v-module双向绑定的实现

上传者: 2021-08-31 01:27:06上传 PDF文件 73.59 KB 热度 12次

v-module 双向绑定实际上就是通过子组件中的 我们着手实现一遍:首先子组件需要一个 input 标签,这个 input 标签需要绑定 input 事件,父组件监听 input 事件,然后将事件携带的 input 输入的值传入到 data 状态中至此子组件监听 input 事件,用户输入字符串即可被父组件获取到并保存在 data 状态中然后父组件还需要将 value 值传递给子组件,子组件再绑定 value 值到 input 的 value 属性上增加 子组件中绑定 input 的 value 属性注意 props 中需要设定 value至此自定义的 v-module 处理完毕,看看效果:在 input 上使用 v-model 比较简单,但考虑到其他元素不一定是要监听 input 事件而是 change 事件,也不一定是 value 属性改变元素的内容。比如 checkbox,我们就需要监听 change 事件,以及 checked 属性。

下载地址
用户评论