Vue 组件实现表单的双向绑定
来源:互联网 发布:美中国际 知乎 编辑:程序博客网 时间:2024/05/02 04:46
下面是一个简单的货币输入的自定义控件,来自https://cn.vuejs.org/v2/guide/components.html:
<body><div id="currency-input"> <p>{{price}}</p> <currency-input v-model="price"></currency-input></div></body><script> Vue.component('currency-input',{ template: '' + '<span>' + '$ <input ref="input" :value="value" @input="updateValue($event.target.value)">' + '</span>', props: ['value'], methods: { updateValue: function (value) { //去除空格,保留两位小数 var formattedValue = value.trim().slice(0,value.indexOf('.') === -1 ? value.length : value.indexOf('.')+3); if(formattedValue !== value){ this.$refs.input.value = formattedValue; } this.$emit('input', Number(formattedValue)) } } }); new Vue({ el: "#currency-input", data: { price: 0 } })
关于这段代码,看的时候有一些疑问,把自己的理解记录下来,有可能不准确,以后如果有新的理解再来更新
1、<currency-input v-model="price"></currency-input>v-model是用在<input>中的,组件中为什么要用v-model?
组件 currency-input 实现的是输入框组件,组件也可以依靠 v-model 实现双向绑定。
2、this.$emit('input', Number(formattedValue))有什么作用,为什么改变输入框文字后还要特地用 $emit 触发 input 事件?
这是组件和<input>不同的地方,组件中为了使 v-model 生效,必须满足两个条件:接受一个 value 属性以及在有新的值时触发 input 事件。
这是因为<inputv-model="something">是以下代码的语法糖:
<inputv-bind:value="something"v-on:input="something = $event.target.value">
3、模板中<input :value="value" >为什么用 v-bind:value 不用 v-model?
v-model 与v-bind:value 的区别在于双向数据绑定,<input> 中的 value 属性来自父组件的传值,而 Vue.js 规定组件的数据传递prop是单向的,子组件<input>不应该在内部改变prop。这里如果使用了v-model,Vue会给如如下警告:
vue.js:482 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"
这段文字解释的很清楚:(子组件内)不允许直接改变prop,因为父组件重新渲染的时候,prop的值会被覆盖。如果需要改变prop,可以基于prop的值,使用data或者computed属性。
- Vue 组件实现表单的双向绑定
- vue.js表单的双向绑定
- VUE双向绑定实现
- Vue中子组件与父组件之间的双向绑定
- 关于vue双向绑定的简单实现
- Vue.js双向绑定的实现原理
- Vue.js双向绑定的实现原理
- Vue的双向绑定原理及实现
- vue如何实现数据的双向绑定
- 【VUE】.NET实现Tree组件双向绑定数据(1)
- 【VUE】.NET实现Tree组件双向绑定数据(2)
- Vue:实现双向数据绑定
- vue.js表单数据双向绑定
- Vue.js实现双向数据绑定(表单自动赋值、表单自动取值)
- vue父组件和子组件通过sync实现双向数据绑定
- Vue 双向绑定的原理及实现Demo
- vue实现双向绑定的原理Object.defineProperty
- Vue实现双向绑定的原理以及响应式数据
- angular $http post 方法有些浏览器不支持原因解答
- POJ
- Linux部署Oracle数据库图形界面乱码
- js的promise应用
- HTML跑马灯
- Vue 组件实现表单的双向绑定
- hdu 1317 XYZZY(floyd+SPFA)
- python Day11:Numpy里的一些基础
- PAC配合ss
- 史上最详细的Hadoop环境搭建
- 移植LINUX的外围设备驱动到QNX系统,linux程序移植到QNX
- android 基础面试题锦记(3) Activity
- Zookeeper的集群安装和配置
- Go语言基础知识