vue v-model的原理

关于v-model

• v-model 可以实现表单与data里的双向绑定

• 很多插件上可以在组件上使用v-model，他是如何实现的呢,其实v-model就是一个语法糖

  <input v-model="something">
  //上面的就等同於下面的,也就是说，你只需要在组件中声明一个name为value的props，并且通过触发input事件传入一个值，就能修改这个value。
  <input :value="something"  @input="something = $event.target.value">
  

  • 父组件中

    
    <template>
      <div class="home">
        <HelloWorld msg="Welcome to Your Vue.js App" v-model="age"/>
      </div>
    </template>
    
    <script>
    // @ is an alias to /src
    import HelloWorld from '@/components/HelloWorld.vue'
    
    export default {
      name: 'Home',
      components: {
        HelloWorld
      },
      data(){
        return {
          age:123123123123
        }
      }
    }
    </script>
    
    

  • 子組件中只需要 声明一个name为value的props，并且通过触发input事件传入一个值，就能修改这个value。

    <template>
        <div>
          <div>{{value}}</div>
          <button @click="handleInput">修改value</button>
        </div>
    
    </template>
    
    <script>
    export default {
      props:['value'],
      data(){
        return {
          msg:333
        }
      },
      methods:{
        handleInput(){
          this.$emit('input','我是新的值')
        }
      }
    }
    </script>
    

  • 如果绑定多个值的话，建议我们用object对象类型，Array数组类型，也就是说我们接收的value类型需要改变下。