vue选项之model

Love The Way You Lie 2023-06-08 10:55 76阅读 0赞

今天看vue api官方文档，看见选项/其他下的model有点看不懂，后面自己查资料实现了一下才明白用法。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]

##### 实现全部代码如下： #####

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>测试Vue</title>
      <script src="./vue.js"></script>
    </head>
    
    <body>
      <div id='root'>
        <my-input v-model='name' value='sad'></my-input>
      </div>
    </body>
    
    <script>
      Vue.component('my-input', {
        template: `<input type="text" :value="username" @input="updateVal($event.target.value)">`,
        model: {
          prop: 'username',
          event: 'changeUsername'
        },
        props: {
          username: {
            type: String,
            default: 'qwer'
          }
        },
        methods: {
          updateVal(val) {
          // 监听input事件，当input框发生改变，触发事件给父组件，完成父组件的绑定值的改变 以实现双向绑定
            this.$emit('changeUsername', val)
          }
        },
        watch: {
          username(newVal, oldVal) {
            console.log(newVal)
          }
        }
      })
    
      var app = new Vue({
        el: '#root',
        data() {
          return {
            name: 'hello'
          }
        },
      })
    </script>
    
    </html>

##### 其中 #####

<my-input v-model='name' value='sad'></my-input>
    //相当于
    <my-input 
      :username="name"
      @changeUsername="val => { name= val }"
      value="sad">
    </my-input >

##### 得到的结果是： #####

![在这里插入图片描述][20191018110220102.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 1]

### 结论： ###

其实v-model只是一种语法糖，如官方所述：  
[**允许一个自定义组件在使用 v-model 时定制 prop 和 event。默认情况下，一个组件上的 v-model 会把 value 用作 prop 且把 input 用作 event，但是一些输入类型比如单选框和复选框按钮可能想使用 value prop 来达到不同的目的。使用 model 选项可以回避这些情况产生的冲突。**][v-model _ prop _ event_ v-model _ value _ prop _ input _ event_ value prop _ model]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]: /images/20230531/3d0a055125a848608a22bd2aef563abd.png
[20191018110220102.png]: /images/20230531/6384b7cd4cb44c3fa823cf2f62355bd2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 1]: /images/20230531/b1efca8f7257432682b9b69c02be5acc.png
[v-model _ prop _ event_ v-model _ value _ prop _ input _ event_ value prop _ model]: https://cn.vuejs.org/v2/api/#name