博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用vue开发输入型组件更好的一种解决方式(子组件向父组件传值,基于2.2.0)
阅读量:6765 次
发布时间:2019-06-26

本文共 709 字,大约阅读时间需要 2 分钟。

(本人想封装一个带有input输入框的组件)

之前使用vue开发组件的时候,在遇到子组件向父组件传递值时我采用的方法是这样的: 

比如子组件是一个输入框,父组件调用时需要获取到子组件输入的值,子组件通过watch监听输入框的值然后通过this.$emit给父组件,再在父组件v-on绑定相应方法获取到从子组件传入的值,再将传入的值给对应的data:

childInput.vue:
parent.vue:

这样的解决方式感觉有点蠢,因为这样写每次我调用子组件的时候都会需要写一个v-on:getValue然后将相应的值赋给对应的data数据,比如在写嵌套组件的时候,一般一个Input组件包含多个input类型,然后在form表单调用的时候可能会调用10个以上的input子组件,就意味着需要些10多个的v-on:xxx=”(val)=>{yyy = val}”。

然而今天在浏览官网时发现了另外一个解决方法:

相对于上述的老办法倒是方便了许多,不过这种方法只有在vue 2.2.0以上才可以使用(根据官网的说法):

parent.vue:
childInput.vue:

这样写每次调用子组件只用像一般的元素写v-model双向绑定数据即可。

转载于:https://www.cnblogs.com/huancheng/p/9633670.html

你可能感兴趣的文章
汽车硬件backdoor生成器
查看>>
Windows下安装的XAMPP如何设置Apache和MySQL等服务开机自启动
查看>>
在redhat系统如何设置支持NTFS系统文件并开机自动挂载
查看>>
linux安装rzsz(lrzsz)
查看>>
Python中_,__,__xx__的区别
查看>>
Python 变量
查看>>
电动汽车锂电池容量选择
查看>>
mongodb的基本语法
查看>>
总结数值的原码、反码、补码
查看>>
Auto Layout简单应用——以编码的方式实现Auto Layout自动布局(二)
查看>>
时间≠金钱,金钱≠健康
查看>>
史上最全的Linux教程 (3)
查看>>
SDUT 小鑫の日常系列故事(六)——奇遇记 递推算法
查看>>
MySQL出现同步延迟有哪些原因?如何解决?
查看>>
Kaviza VDI-in-a-box 实验手册
查看>>
在Solaris 10编译并安装vim7.3
查看>>
Google Chrome OS 将来能取代 Windows 帝国吗?
查看>>
IDEA或Webstorm设置Ctrl+滚轮调整字体大小
查看>>
秒开缓存服务器详细介绍
查看>>
WebGoat题目解答(General~XSS)
查看>>