vue项目中v型亲子组件沟通详解

序

在vue项目中，我们经常有这样的要求：父组件绑定到v-model，子组件输入值来改变父组件v-model的绑定。很多朋友对这个操作不是很清楚，需要对v型有更深的了解。今天，我将谈谈v型车。

vue的双向数据绑定

v-model指令只能用于输入、选择、textarea等表单元素。所谓的双向绑定是指js中我们vue实例中的数据与其呈现的dom元素上的内容是一致的，无论谁被更改，对方都会相应地更新为相同的数据。

这个问题在很多前端采访中都提到过。面试官问你，vue双向数据绑定的原理是什么？当然，这也是一个熟悉的问题。百度随便搜索就能到处找到答案。

一般会发现Object.defineProperty()是用来监控数据的获取和设置，实现数据劫持。

如果你不太了解Object.defineProperty()，可以点击上面的链接查看它的语法！

举个简单的例子：

var blog={ name : ' Hao rooms blog ' }；console . log(blog . name)；//haorooms blog如果要在执行console.log(blog.name)的同时直接给haorooms blog添加标题，应该怎么做？或者听什么对象博客的属性值。这时，Object.defineProperty()就派上了用场，代码如下：

var blog={ } var name=object . defineperoperty(blog，' name '，{ set : function(value){ name=value；Console.log('欢迎使用'值)；}，get : function(){ return ' 《' + name + '》 ' })blog。name=' haorooms blog//欢迎使用haorooms博客console . log(blog . name)；//《haorooms博客》执行完上面的代码，就可以检查效果了！

如何实现vue的双向数据绑定？网上也有很多实现代码，这里就不多赘述了！

v型的使用

上面有一个简短的注释和这么多的谈论，其实是为了说明Vue是一个单一的数据流，v-model只是语法糖。

输入v-model=' Hao rooms '/输入v-bind:值=' Hao rooms ' v-:输入=' haorooms=$ event。目标。value '/第一行的代码实际上只是第二行的语法糖。那么第二行代码可以缩写如下：

Input:值=' Hao rooms ' @ input=' Hao rooms=$ event . target . value '/也就是说，

输入v-model=' Hao rooms '/也可以写成

在组件上使用input:值=' Hao rooms ' @ input=' Hao rooms=$ event . target . value '/v-model

回到我们最初的问题？v-model如何与vue中的父子组件进行通信？如何在组件中使用它？如果你理解我上面的例子，那么我们可以简单地在组件中使用v-model。

父组件代码如下：

template div id=' demo ' test-model v-model=' Hao rooms '/test-model span { { Hao rooms } }/span/div/template script从' src/components/Testmodel '导入testModel导出默认{ data(){ return { Hao roums : ' Hao roums ' }，components: { testmodel，}/script style lang=' SCS '作用域/样式子组件代码如下：

template span input ref=' input ' : value=' value ' @ input=' $ emit(' balabala '，$ event . target . value)'/span/template script export default { data(){ return } }，prop 3360[' value ']，model: { prop: 'value '，event 3360 ' balabala ' }/script style lang=' SCS ' scoped/style我们可以通过上面的代码和子组件修改父组件v-model绑定的值

实现截图如下：

v型模型的缺点及解决方案

在创建复选框或无线电盒等常见组件时，v-model并不容易使用。

input type=' checkbox ' v-model=' Hao roums '/我们可以通过以下方式解决：

输入类型=' checkbox ' : checked=' status ' @ change=' status=$ event . target . checked '/父组件可以写成如下形式：

my-checkbox v-model=' Hao rooms '/my-checkbox子组件：

输入类型='复选框'！-这里没有输入，但是balabala-@ change=' $ emit '(' balabala '，$ event . target . checked)' : checked=' value '/export default { data(){ return } }。prop :[' Checked ']，//这里没有值，但是Checked Model 3360 { prop : ' Checked '，Event :' balabala'}，}关于vue的v-model写在这里。

摘要

以上就是本文的全部内容。希望本文的内容对大家的学习或工作有一定的参考价值。有问题可以留言交流。谢谢你的支持。