vue中的v-model原理，与组件自定义v-model

VUE中的v-model可以实现双向绑定，但是原理是什么呢？往下看看吧

根据官方文档的解释，v-model其实是一个语法糖，它会自动的在元素或者组件上面解析为 :value="" 和 @input=""，就像下面这样

1 // 标准写法
2 <input v-model="name">
3
4 // 等价于
5 <input :value="name" @input="name = $event.target.value">
6
7 // 在组件上面时
8 <div :value="name" @input="name = $event"></div>

1.当在input输入框输入内容时，会自动的触发input事件，更新绑定的name值。

2.当name的值通过JavaScript改变时，会更新input的value值

根据上面的原理，vue就通过v-model实现双向数据绑定

看了前面的解释，对于v-model有了一定的理解。下面我们就来实现自己组件上面的v-model吧

需求：实现一个简单的点击按钮，每次点击都自动的给绑定值price加100。组件名为 AddPrice.vue

// AddPrice.vue
// 通过props接受绑定的value参数
<template><div @click="$emit('input',value + 100 )">点击加钱<div>
</template><script>export default {props: ['value']}</script>// 在父组件中调用
<add-price v-model="price"></add-price>

组件中使用props接受传入的参数值value, 组件点击事件触发并使用$emit调用父组件上的input事件，实现了自定义的双向绑定

转载于:https://www.cnblogs.com/baikouLoser/p/11122406.html

vue中的v-model原理，与组件自定义v-model相关推荐

vue中路由的实现原理？
vue中路由的实现原理? 1.首先需要了解一下Vue路由分为两种,一种是哈希路由,其最明显的特征是URL地址带'#'号的,其实对地址栏也就不怎么美观一点.其次是history路由也就是URL不带'#' ...
vue中，应用mapbox地图——地图组件mapbox-gl和语言包@mapbox/mapbox-gl-language地图英文转中文 accesstokens-访问令牌移动端地图-leaflet
vue中,应用mapbox地图--地图组件mapbox-gl和语言包@mapbox/mapbox-gl-language用于将地图上的英文转中文 & accesstokens-访问令牌 &am ...
「后端小伙伴来学前端了」Vue中利用全局事件总线实现组件之间通信
月亮啊月亮你能照见南边,也能照见北边照见她,你跟她说一声,就说我想她了. 前言前一篇文章写了 vue 中利用 Props 实现组件之间的通信,那种方式是最简单也是最基础的组件之间的通信方式.父组 ...
vue中的keep-alive实现原理
一.前言本文介绍的内容包括: keep-alive用法:动态组件&vue-router keep-alive源码解析 keep-alive组件及其包裹组件的钩子 keep-alive组件及其 ...
Vue中的scoped实现原理和样式穿透方法及原理
目录 scoped 一.什么是scoped,为什么要用二.scoped的原理三.示例样式穿透一.为什么需要穿透scoped? 二.样式穿透的方法三.样式穿透原理 1.示例 2.效果图 sco ...
vue中实现双向数据绑定原理,使用了Object.defineproperty()方法,方法简单
在vue中双向数据绑定原理,我们一般都是用v-model来实现的 ,但一般在面试话会问到其实现的原理, 方法比较简单,就是利用了es5中的一个方法.Object.defineproperty(),它有 ...
vue中如何优雅实现爷孙组件的数据通信($attrs/$listeners)
$attrs和 $listeners如何使用呢? $attrs是用来将数据从爷组件传递给孙组件的.(理解为之前的父传子) $listeners是用来从孙组件中触发爷组件中事件的.(理解为之前的子传父) ...
实例-Vue中使用右键菜单之@xunleivue-context-menu组件的使用
实例-Vue中使用右键菜单之@xunlei/vue-context-menu组件的使用 npm地址--https://www.npmjs.com/package/@xunlei/vue-context ...
vue中路由实现的原理？
一.概念通过改变 URL,在不重新请求页面的情况下,更新页面视图. 二.实现方式更新视图但不重新请求页面,是前端路由原理的核心之一,目前在浏览器环境中这一功能的实现主要有2种方式: 1.Hash ...
[绍棠] Vue中this.$nextTick()实现原理及使用场景学习总结
this.$nextTick()原理: Vue 实现响应式并不是数据发生变化之后 DOM 立即变化,而是按一定的策略进行 DOM 的更新. Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中 ...

vue中的v-model原理，与组件自定义v-model

vue中的v-model原理，与组件自定义v-model相关推荐

最新文章

热门文章