深入理解Vue 单向数据流的原理

<input v-model="something" />
<input v-bind:value="something" v-on:input="something = $event.target.value" />

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

<currency-input v-model="price"></currency-input>
Vue.component('currency-input', {
 template: ' <span>  $  <input  ref="input"  v-bind:value="value"  v-on:input="updateValue($event.target.value)"  > </span> ',
 props: ['value'], // 为什么这里要用 value 属性，value在哪里定义的？
 methods: {
 // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
 updateValue: function (value) {
  var formattedValue = value
  // 删除两侧的空格符
  .trim()
  // 保留 2 位小数
  .slice(
   0,
   value.indexOf('.') === -1
   "htmlcode">

<currency-input v-model="price"></currency-input>
所以在组件中使用时，它相当于下面的简写：
//上行代码是下行的语法糖
<currency-input :value="price" @input="price = arguments[0]"></currency-input>




所以，给组件添加 v-model 属性时，默认会把 value 作为组件的属性，然后把 'input' 值作为给组件绑定事件时的事件名。这在写组件时特别有用。
3、v-model 的缺点和解决办法
在创建类似复选框或者单选框的常见组件时，v-model就不好用了。


<input type="checkbox" v-model="something" />


v-model 给我们提供好了 value 属性和 oninput 事件，但是，我们需要的不是 value 属性，而是 checked 属性，并且当你点击这个单选框的时候不会触发 oninput 事件，它只会触发 onchange 事件。
因为 v-model 只是用到了 input 元素上，所以这种情况好解决：




<input type="checkbox" :checked="value" @change="change(value, $event)"


当 v-model 用到组件上时：


<checkbox v-model="value"></checkbox>

Vue.component('checkbox', {
 tempalte: '<input type="checkbox" @change="change" :checked="currentValue"/>'
 props: ['value'],
 data: function () {
  return {
   //这里为什么要定义一个局部变量，并用 prop 的值初始化它。
   currentValue: this.value
  };
 },
 methods: {
 change: function ($event) {
  this.currentValue = $event.target.checked;
  this.$emit('input', this.currentValue); 
 }
})




在 Vue 2.2 版本，你可以在定义组件时通过 model 选项的方式来定制 prop/event 。
4、vue 组件数据流
从上面 v-model 的分析我们可以这么理解，双向数据绑定就是在单向绑定的基础上给可输入元素（input、textare等）添加了 change(input) 事件，来动态修改 model 和 view ，即通过触发（$emit）父组件的事件来修改mv来达到 mvvm 的效果。而 vue 组件间传递数据是单向的，即数据总是由父组件传递到子组件，子组件在其内部可以有自己维护的数据，但它无权修改父组件传递给它的数据，当开发者尝试这样做的时候，vue 将会报错。这样做是为了组件间更好的解耦，在开发中可能有多个子组件依赖于父组件的某个数据，假如子组件可以修改父组件数据的话，一个子组件变化会引发所有依赖这个数据的子组件发生变化，所以 vue 不推荐子组件修改父组件的数据，直接修改 props 会抛出警告。流程图如下：



所以，当你想要在子组件去修改 props 时，把这个子组件当成父组件那样用，所以就有了
1、定义一个局部变量，并用 prop 的值初始化它。

2、定义一个计算属性，处理 prop 的值并返回。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。