VUE-v-model原理剖析

原理剖析：

子组件custom-input为一个input标签，将input标签的 value attribute 绑定到一个名叫 value 的 prop 上
通过v-on:input监听input标签输入事件，同时将该监听事件由 $emit()函数向外抛出，其参数一为该监听事件的函数名handle，第二个参数为抛出的input标签的value值
在父组件中用searchText动态绑定子组件中props的value属性
父组件监听子组件抛出的 input 标签输入事件 handle，同时将抛出的 input标签的value值赋值给 searchText

因此当子组件中触发了 input标签输入事件，将会被父组件通过handle监听，其value将被动态绑定到了父组件中的 searchText属性，因此 searchText 的值同时会发生改变

<body>
  <div id="app">
    <p>v-model运行原理: {{searchText}}</p>
    <custom-input 
          v-bind:value="searchText" 
          v-on:handle="searchText = $event">
      </custom-input>
  </div>

  <script type="text/javascript">

    // 定义全局组件 custom-input
    Vue.component('custom-input', {
      props: ['value'],
      template: `
    <input
      v-bind:value="value"
      v-on:input="$emit('handle', $event.target.value)"
    >
  `
    })

    var vm = new Vue({
      el: '#app',
      data: {
        searchText: ''
      }
    });
  </script>
</body>