数据双向绑定v-modal

v-model

v-model就实现了双向数据绑定,实际上它就是通过Vue提供的事件机制。即在子组件通过$emit()触发一个事件,在父组件使用v-on来监听对应的事件并修改相应的数据。

input的v-model就是通过<input :value="value" @input="input"/>

封装一个input组件,v-model实现

两个注意点:

假设不是使用的value属性和input事件,而是使用string属性和strChange事件。通过mode属性设置

爷父孙组件,父组件通过computed实现

js 复制代码
// 父组件
<my-input v-model="value"></my-input>

// my-input子组件组件
<template>
  <!-- 2. 监听 input 事件的出发 -->
  <div class="input" contenteditable @input="input"></div>
</template>

<script>
export default {
  // 1. 接受父级传递的值
  props: {
    value: {
      type: String,
      default: ''
    }
  },
  methods: {
    // 3. 编写 input 事件触发执行的事件处理函数
    input (event) {
      // 4. $emit input 事件,并将 event.target.innerText 作为参数
      this.$emit('input', event.target.innerText)
    }
  }
}
</script>

原生实现数据双向绑定

html 复制代码
<body>
  <span id="text"></span>
  <input id="value" />
</body>
<script>
window.onload = function() {
  let input = document.getElementById('value')
  let text = document.getElementById('text')
  let data = { value: '' }
  input.value = data.value
  text.innerHTML = data.value
  // 数据劫持
  Object.defineProperty(data, 'value', {
    set: function (val) {
      input.value = val
      text.innerHTML = val
    },
    get: function () {
      return input.value
    }
  })
  input.addEventListener('keyup', function (){
    data.value = input.value
  })
}
</script>
相关推荐
摸鱼仙人~几秒前
React Ref 指南:原理、实现与实践
前端·javascript·react.js
teeeeeeemo2 分钟前
回调函数 vs Promise vs async/await区别
开发语言·前端·javascript·笔记
ac.char13 分钟前
Golang读取ZIP压缩包并显示Gin静态html网站
golang·html·gin
贵沫末20 分钟前
React——基础
前端·react.js·前端框架
每天开心25 分钟前
深入理解 CSS 选择器:从基础到高级
css·html·ai编程
aklry32 分钟前
uniapp三步完成一维码的生成
前端·vue.js
Rubin9339 分钟前
判断元素在可视区域?用于滚动加载,数据埋点等
前端
爱学习的茄子40 分钟前
AI驱动的单词学习应用:从图片识别到语音合成的完整实现
前端·深度学习·react.js
用户38022585982440 分钟前
使用three.js实现3D地球
前端·three.js
程序无bug43 分钟前
Spring 面向切面编程AOP 详细讲解
java·前端