原理剖析：
-
子组件
custom-input为一个input标签，将input标签的valueattribute 绑定到一个名叫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>