当前位置：首页 > news >正文

数据双向绑定v-modal

news 2025/8/18 5:57:48

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实现

// 父组件
<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>

原生实现数据双向绑定

<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.valuetext.innerHTML = data.value// 数据劫持Object.defineProperty(data, 'value', {set: function (val) {input.value = valtext.innerHTML = val},get: function () {return input.value}})input.addEventListener('keyup', function (){data.value = input.value})
}
</script>