自定义组件封装实现v-model

vue的v-model的语法糖

• v-bind实现数据的单向绑定，将父组件的数据传入子组件，但子组件不能修改v-bind传递过来的数据。

• v-on监听子组件的数据变化或者事件，将其传递给父组件，用@简写

• 所以其实v-model是通过v-bind绑定了数据，在通过v-on监听了数据改变的值，并触发了v-on相应的事件，实现了数据与视图之间数据的双向绑定。

   <input v-bind:value="inputValue" v-on:input="inputValue = '$event.target.value'"/> 
   //等同于
   <input v-model="inputValue"/>
   
  

如何在封装的组件中实现V-model的功能？

• 在vue2.2中新增的:model方法，允许用户定制prop和event，也就是prop抛出单向数据的传输，以及触发event事件。

      //子组件中定义model 
      <template> 
          <div> 
              <a-table :data="originData" :column="originColumn" @change="changeData" /> 
           </div> 
       </template> 
      <script> 
      export default { 
          //model里定义要接收的prop参数、以及触发的evet事件名 
          model: { prop: 'tableOriginDataInter', event: 'change' }, 
          //props里定义model里传递过来的参数
          props: { 
          tableOriginDataInter: { 
          type: Array, 
          default: () => []
          } 
         } 
       data() { 
           originData: [], // 用来存储prop传递过来的表格data 
           originColumn: [], }, 
           // watch监听prop的传值是否改变，并保存到副本OriginData里 
           watch: { 
               tableOriginDataInter(newValue) {
               this.originData = newValue.data; 
               this.originColumn = newValue.column; 
               }
             } 
           methods: { 
               changeData() { 
               //change事件触发后的数据操作 
               }
              }
             }
         <script> 
         //父组件中 
         <template> 
             <MyTable v-model="tableOriginData" /> 
          </tempalte>
  

我的博客：http://60.204.150.29/?p=442 欢迎访问，希望能给我更多的建议。ღ( ´･ᴗ･` )