vue总结系列 ---- 在组件上的v-model单向数据流

背景

目前是在复习vue原理的过程中，前端负责人知道我最近在复习vue，跟我说要我看组件上的v-model,我一听本来是不想放在心上的，刚好那天晚上没什么事干想看一下，毕竟负责人，还是要尊重一下，每想到这样一看，与我最近看的单向数据流，连起来了，哇！大佬就是大佬。。下面就让我们来看一下v-model吧！

v-model的作用？

这个问题一问：大家都会说是双向绑定，但是问题来了，他是双向绑定吗？答案是：NO,对确实v-model不是双向绑定，好我们来看官网怎么说的：v-model 本质上不过是语法糖。它负责监听用户的输入事件以更新数据，并对一些极端场景进行一些特殊处理，看到了吗是语法糖，意思就是他其实就是一段代码的简写那么那段代码是什么呢？
其实v-model="username"代表的就是上面那一段代码，

<input type="text" 
       :value="username" 
       @input="username = $event.target.value"
> 
//$event.target当前发生事件的对象不会冒泡.value的值

撒花，我们已经明白了v-model这个语法糖了，对我想你们看到这里你们会认为好像懂了，其实昨天晚上我也是这样让为的呵呵，然而当我自己写一个在组件上的v-model的时候写了一个上午（在实习呵呵），到快中方吃饭的时候才想清楚了

要求

我们的要求是什么？就是我们自己写的组件可以像input（表单）一样写一个v-model那么那个数据就可以双向绑定（语法糖）。

遇到问题我们一定要把问题理解清楚，把问题解析，那么我们就快解决了，所以才会有什么一直写不出来，在回家的路上，吃饭的时候吧问题想出来的情景，对吧

好了,我们先来分析问题什么情况下可以双向绑定（语法糖）

父向子传值：用props

子向父传值：用自定义事件监听传参数

好了看到这里其实问题就差不多了

我们还是分布写吧，这样看的会更加明白

<div id="app">
    <btn-custom :value = 'total' @input = 'fatheron'></btn-custom>
</div>
new Vue({
    el:'#app',
    data() {
        return {
            total:"",
       }
    },
    methods:{
        fatheron:function(val){
        //console.log(val);
        this.total = val;
        }
    }
})

这里是吧v-model语法糖拆开来了，并没有用v-model,这里的val参数就是我们的子组件传出来的参数event.target.value，那么整体的写法就是：

1.再非vue-cli下测试的

   <div id="app">
    <!-- <btn-custom :value='total' @input='fatheron'></btn-custom> -->
    <btn-custom v-model='total'></btn-custom>
  </div>
 <script>
    //定义一个组件btn-custom
    Vue.component('btn-custom', {
      model: {
        prop: 'value', // value是子组件接收的值，传递的值是$emit('input','参数')中的参数的值，注意的是子组件不要直接拿父组件传过来的值去修改
        event: 'input' // 定义父组件监听的事件
      },
      props: ['value'],
      template: `
          <input
          type="text"
          :value="value"
          @input="updata"
        >
        `,
      methods: {
        updata: function (event) {
          console.log('再子组件中输出', this.value);
          console.log('再子组件中输出2----', event.target.value);
          this.$emit('input', event.target.value); //绑定事件
        }
      },
    });
    new Vue({
      el: '#app',
      data() {
        return {
          total: "",
        }
      },
      methods: {
        fatheron: function (val) {
          console.log('再父组件触发事件输出值为：', val);
          this.total = val;
        }
      }
    })
  </script>

其实这里看上去是双向绑定，其实是vue只有单向数据流导致只可以父向子传值，子向父却是通过事件传递参数

分析

其实就是节省了一些操作：少一个v-bind传值，和一个接收事件，事件的作用:把子组件传过来的值替换掉目前的值，从而达到双向绑定的效果