使用vue开发输入型组件更好的一种解决方式(子组件向父组件传值,基于2.2.0)
2017-11-03 14:04
946 查看
之前使用vue开发组件的时候,在遇到子组件向父组件传递值时我采用的方法是这样的:
比如子组件是一个输入框,父组件调用时需要获取到子组件输入的值,子组件通过watch监听输入框的值然后通过this.$emit给父组件,再在父组件v-on绑定相应方法获取到从子组件传入的值,再将传入的值给对应的data:
这样的解决方式感觉有点蠢,因为这样写每次我调用子组件的时候都会需要写一个v-on:getValue然后将相应的值赋给对应的data数据,比如在写嵌套组件的时候,一般一个Input组件包含多个input类型,然后在form表单调用的时候可能会调用10个以上的input子组件,就意味着需要些10多个的v-on:xxx=”(val)=>{yyy = val}”。
然而今天在浏览官网时发现了另外一个解决方法:
相对于上述的老办法倒是方便了许多,不过这种方法只有在vue 2.2.0以上才可以使用(根据官网的说法):
这样写每次调用子组件只用像一般的元素写v-model双向绑定数据即可。
创作不易,觉得不错记得点下赞哟~
比如子组件是一个输入框,父组件调用时需要获取到子组件输入的值,子组件通过watch监听输入框的值然后通过this.$emit给父组件,再在父组件v-on绑定相应方法获取到从子组件传入的值,再将传入的值给对应的data:
childInput.vue: <template> <input type="text" v-model="inputValue"> </template> <script> export default{ data() { return{inputValue: null} }, watch:{ inputValue(val){ this.$emit('getValue', val) } } } </script> parent.vue: <template> <div> <child-input v-on:getValue="(val)=>{someValue = val}"/> </div> </template> <script> export default{ data(){ someValue: null } } </script>
这样的解决方式感觉有点蠢,因为这样写每次我调用子组件的时候都会需要写一个v-on:getValue然后将相应的值赋给对应的data数据,比如在写嵌套组件的时候,一般一个Input组件包含多个input类型,然后在form表单调用的时候可能会调用10个以上的input子组件,就意味着需要些10多个的v-on:xxx=”(val)=>{yyy = val}”。
然而今天在浏览官网时发现了另外一个解决方法:
相对于上述的老办法倒是方便了许多,不过这种方法只有在vue 2.2.0以上才可以使用(根据官网的说法):
parent.vue: <template> <div> <child-input v-model="someValue"/> </div> </template> <script> export default{ data(){ someValue: null } } </script> childInput.vue: <template> <span> <input ref="input" v-bind:value="value" v-on:input="updateValue($event.target.value)" > </span> </template> <script> export default{ data() { return { inputValue: null,//输入框的值 } }, methods: { updateValue(val) { this.$emit('input', val) } } } </script>
这样写每次调用子组件只用像一般的元素写v-model双向绑定数据即可。
创作不易,觉得不错记得点下赞哟~
相关文章推荐
- N-Tiers开发方式(为何使用COM+组件的撰写商业逻辑层)
- 使用VS2005 开发AcitveX组件及碰到的问题解决
- .net 开发使用office组件后,IIS中部署出现无法访问的解决办法
- 真正的创新必然是基于对市场的了解,对客户反馈的观察,开发出来的产品一定要适应市场,提出的模式一定要能解决现实的问题。而在这其中,技术只是一种实现手段。
- 初次使用VS2010基于C++开发项目碰到的问题及解决方法
- N-Tiers开发方式(ASP/ASP.NET、VB6/VB.NET呼叫使用COM+组件)
- 使用NetBeans IDE进行基于组件的Web开发
- 基于Lumisoft.NET组件开发碰到乱码等一些问题的解决
- ARX二次开发中使用DAO方式访问数据库,导致AutoCAD2004及以上版本退出时报错的解决方法
- 使用avalon ms-ui绑定实现基于组件的开发
- ADF_ADF Faces系列2_使用JSF开发基于Ajax的用户界面:ADF Faces富客户端组件简介(Part2)
- 基于MVC4+EasyUI的Web开发框架形成之旅--附件上传组件uploadify的使用
- ADF_ADF Faces系列1_使用JSF开发基于Ajax的用户界面:ADF Faces 富客户端组件简介(Part1)
- JFreeChart基于Java Web的报表组件的使用以及解决乱码
- 使用 JSF 开发基于 Ajax 的用户界面:ADF Faces 富客户端组件简介
- 初次使用VS2010基于C++开发项目碰到的问题及解决方法
- 一种基于组件的跨WEB/手机/WINDOS/UNIX平台的多层开发
- get方式传值包含中文时的一种解决办法
- 一种基于组件的跨WEB/手机/WINDOS/UNIX平台的多层开发框架构思
- ARX二次开发中使用DAO方式访问数据库,导致AutoCAD2004及以上版本退出时报错的解决方法