数据双向绑定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>
相关推荐
丘耳几秒前
前端渲染方式
前端
The_cute_cat几秒前
Ajax和Axios的初步学习
前端·学习·ajax
Zz_waiting.2 分钟前
Javaweb - 10.4 ServletConfig 和 ServletContext
java·开发语言·前端·servlet·servletconfig·servletcontext·域对象
爱学习的小学渣2 分钟前
JS用法:Map,Set和异步函数
前端·javascript
Mike_jia10 分钟前
Icinga 2:开源监控领域的全能选手——从零构建企业级智能运维体系
前端
wuxuanok11 分钟前
Web前端开发-HTML、CSS
前端·css·html
Mike_jia11 分钟前
Dish:套接字监控领域的「听诊器」——轻量级网络健康守护神深度解析
前端
独立开阀者_FwtCoder20 分钟前
"页面白屏了?别慌!前端工程师必备的排查技巧和面试攻略"
java·前端·javascript
慧一居士21 分钟前
Vite 完整功能详解与 Vue 项目实战指南
前端·vue.js
南岸月明21 分钟前
不聊主业,聊聊你们眼中的副业是什么样的?
前端