v-model、sync、lazy使用说明

v-model使用

v-model是一个语法糖，它会自动在元素或组件上添加 :value = ‘’ 和 @input = ''
当input的type是text时，它的value属性代表输入框的初始值并且可修改

在元素上使用

   <input v-model='name'/>

等同于

  <input :value = 'inputValue' @input='inputClick'/>
  <button @click="changeInputValue">修改inputValue值</button>
   data() {
    return {
      inputValue:''
    }
  },
  methods:{
      inputClick(e){
          this.inputValue = e.target.value;
      },
      changeInputValue() {
          this.inputValue = "生活"
    }
  }

• 当给input框输入内容时，会自动触发input事件，通过input事件更新绑定的inputValue值

• 当通过js修改inputValue时，会更新input的value值，进而修改input框中的内容

  在组件上使用

通过在组件上使用v-model，可实现父子组件数据的双向绑定

父组件引入子组件children

 <children v-model = 'name'/>

等同于

 <children :value="name" @input="name = $event"></children>

子组件

 <div @click = 'btnClick'/>
   export defalut{
       props:{
           value:String
       },
       methods:{
           btnClick(){
               this.$emit('input', 'xiaoming')
           }
       }
   }

v-model内部原理

当遇到v-model指令时会给标签添加input事件

   node.addEventListener('input', e => {
              vm[name] = e.target.value
          })

当给vm[name]赋值时，就是触发object.defaultProperty的set方法，最终给input的value赋值

v-model.lazy使用

在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。你可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步

• input事件是在元素值变化时就会触发
• change事件是在元素失去焦点时才会触发

.sync 修饰符

父组件

<children :title.sync="doc.title"></children>

等同于

  <children
      :title="doc.title"
      @update:title="doc.title = $event"
  ></children>

子组件

  this.$emit('update:title', newTitle)

v-bind.sync使用

通过.sync 修饰符和 v-bind 配合使用，可以让obj对象的每个属性都具有了双向绑定的效果，以便让代码更简洁
父组件

  <children
      v-bind.sync="obj"
  ></children>
  data() {
    return {
      obj:{
        name:'xiaoming',
        age:30
      }
    }
  }

子组件

  props: {
    name:String,
    age:Number,
  },
  methods: {
    setName() {
        this.$emit('update:name', 'xiaohong')
    },
    setAge() {
        this.$emit('update:age', 100)
    }
  }