等价于
<input v-bind:value="searchText" v-on:input="searchText = $event.target.value" >当用在组件上时,v-model则会这样：
<custom-input v-model="searchText"></custom-input>等同于
<custom-input v-bind:value="searchText" v-on:input="searchText = $event" ></custom-input>为了让它正常工作，这个组件内的<input>必须：
将其 value 特性绑定到一个名叫value的prop上在其 input 事件被触发时，将新的值通过自定义的input事件抛出 Vue.component('custom-input', { props: ['value'], template: ` <input v-bind:value="value" v-on:input="$emit('input', $event.target.value)" > ` })现在v-model就应该可以在这个组件上完美地工作起来了：
<custom-input v-model="searchText"></custom-input>父组件App.vue中
<template> <div id="app"> <Model v-model="searchText"></Model> <span>{{searchText}}</span> <!-- 等价于 <custom-input v-bind:value="searchText" @input="searchText = $event" ></custom-input> --> </div> </template> <script> import Model from "./components/Model"; export default { name: "App", data: function() { return { searchText:'' }; }, components: { Model } }; </script>子组件model.vue中
<template> <div id="app"> <input v-bind:value="value" @input="$emit('input', $event.target.value)"> </div> </template> <script> export default { props: ["value"], }; </script>过程： 1.输入文字 2.:value='search' 传给子组件 3.子组件props接收 4.子组件:value='value' 5.子组件绑定input通过$emit传给父组件 6.父组件@input='searchText = $event'接收
转载于:https://www.cnblogs.com/guangzan/p/11269005.html
