v-model

• v-model 其实是个语法糖

<input v-model="sth" />
<!- -  等价于  -->
<input v-bind:value="sth" v-on:input="sth = $event.target.value" />

• 举个简单的例子：

html:

<div id="app">
  <my-component v-model="content"></my-component>
  <p>{{ content }}</p>
</div>

javascript:

Vue.component('my-component',{
  template: '<div><p>{{value}}</p><button @click="handle">点击更换枪械</button> </div>',
  props:['value'],
  methods:{
    handle: function(){
      this.$emit('input','qbz95');
    }
  }
})

new Vue({
  el: '#app',
  data: {
    content: 'ak47'
  }
})

进一步理解

• 官方文档

• v-model等价的v-bind绑定的属性名和v-on绑定的事件名是可以自定义的。

• 自定义时需要使用组件的model选项

• model { prop：组件绑定的属性名，event：组件抛出的事件 }

• 现在将上面的例子改一下：

Vue.component('my-component', {
  template: '<div><p>{{myValue}}</p><button @click="handle">点击更换枪械</button></div>',
  model: {
    prop: 'myValue',
    event: 'myMethod'
  },
  props: ['myValue'],
  methods: {
    handle: function() {
      this.$emit('myMethod', 'qbz95');
    }
  }
})

• 运行之后发现跟原来的效果一样。

深入理解

• 之前子组件中用的是button按钮，接下来用input输入框来写：

Vue.component('my-component', {
    template: `<div>更换枪械:
        <input type="text" @input="handle($event.target.value)" 
        :value="myValue"></div>`,
    model: {
        prop: 'myValue', // 对应子组件中的value值
        event: 'myMethod'  // 对应传给父组件的事件名
    },
    props: { myValue:String },
    methods: {
        handle: function(value) {
            this.$emit('myMethod', value);
        }
    }
})
            
let vm = new Vue({
    el: '#app',
    data: {
        content: 'ak47'
    }
})

• 附：

  • text和textarea元素使用value属性和input事件

  • checkbox和radio使用checked属性和change事件

  • select使用value和change事件

[注:] 初学Vue，学术不精，如有错误，恳请指出！

参考：

• vue 自定义组件使用v-model
• vue的model选项和自定义组件的v-model