v-model梳理

父组件:

<div id="father">

这里是父组件 父组件的v-model:{{isShow}}

<child :test="aaa" v-model="isShow"></child>

</div>


子组件:

props:{

value:{//可以直接通过value获取 在父页面v-model绑定给子组件上的值

 type:Boolean,

 default:true

},

}


官方解释:

<input v-model="searchText">

等价于

<input :value="searchText" @input="searchText=$event.target.value">

用在组件上时

<custom-input  :value="searchText"  @input="searchText=$event"></custom-input>


所以可以这样用:

父组件中:

<child  v-model="number"></child>

子组件

props:{value:{}}

<div @click="$emit('input',value+1)">//通过input事件来使父组件的number+1

解释说明:

通过v-bind把父组件的数据绑定到了子组件的props属性中,而在props上默认用value取值,然后通过$emit触发事件input,因为v-model绑定的事件是input,故在子组件上触发了父组件的input事件,通过触发事件来进行传值,实现了父子组件数据的双向绑定,相对于直接使用v-bind以及自定义事件代码量有所减少

原理:

首先我们为每个vue属性用Object.defineProperty()实现数据劫持,为每个属性分配一个订阅者集合的管理数组dep;然后在编译的时候在该属性的数组dep中添加订阅者,v-model会添加一个订阅者,{{}}也会,v-bind也会,只要用到该属性的指令理论上都会,接着为input会添加监听事件,修改值就会为该属性赋值,触发该属性的set方法,在set方法内通知订阅者数组dep,订阅者数组循环调用各订阅者的update方法更新视图。

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 在 vue 开发开发中, v-model 是一个非常常用的属性. 常规模式下,我们给定当前组件的某个 data 属...
    人话博客阅读 5,374评论 0 50
  • Vue 实例 属性和方法 每个 Vue 实例都会代理其 data 对象里所有的属性:var data = { a:...
    云之外阅读 6,700评论 0 6
  • vue.js是什么 是一套构建用户界面的渐进式框架 vue应用组成 一个 Vue 应用由一个通过new Vue创建...
    多多酱_DuoDuo_阅读 4,659评论 0 2
  • 本文是lhyt本人原创,希望用通俗易懂的方法来理解一些细节和难点。转载时请注明出处。文章最早出现于本人github...
    lhyt阅读 6,637评论 0 4
  • 一、了解Vue.js 1.1.1 Vue.js是什么? 简单小巧、渐进式、功能强大的技术栈 1.1.2 为什么学习...
    蔡华鹏阅读 8,692评论 0 3

友情链接更多精彩内容