【vue2第十一章】v-model的原理详解与如何使用v-model对父子组件的value绑定和修饰符.sync

灰太狼 2023-10-15 15:31 6阅读 0赞

#### v-model的原理详解 ####

v-model的本质就是一个语法糖，实际上就是 `:value="msg"` 与 `@input="msg = $event.target.value"` 的简写。  
`:value="msg"` 从数据单向绑定到input框，当data数据中的msg内容一旦改变，而input框数据也随之改变。  
`@input="msg = $event.target.value"` 是为input框绑定了input事件，内容改变则触发，而在触发时又把这个input框的value值赋值给了data数据中的msg。  
![在这里插入图片描述][7a7ece522b334534b5d65318740b6dea.png_pic_center]

#### 原本使用porps和$emit实现的父子组件通信。 ####

这下面的代码就实现了父子组件属性的双向绑定。  
![在这里插入图片描述][bd7e84031e3a4d62b224ddabc4cc7a78.png_pic_center]  
而这其中父组件中的子标签属性 `:value="msg" @input="sendMsg"` 是与 使用 `v-model:"msg"` 等价的，因为`sendMsg(value){ console.log(value) this.msg = value }`方法的内容是与v-model原理中的`@input="msg = $event.target.value"`是一模一样的意思，所以在父组件中我们可以使用以下代码来与子组件双向绑定

<template>
      <div id="app">
        <MyInput v-model="msg"></MyInput>
      </div>
    </template>
    
    
    <script>
    import MyInput from './components/MyInput.vue';
    
    export default {
          
      name: "App",
      data() {
          
        return {
          
          msg: "你好!vue",
        };
      },
      components:{
          
        MyInput
      },
    };
    </script>
    
    
    <style>
    #app {
          
      width: 100%;
      height: 600px;
      background-color: skyblue;
      overflow: hidden;
    }
    </style>

而子组件则需要注意的是，使用`props:{ value:String },` 来接受父组件数据，必须是vaule：

<template>
      <input  type="text" :value="value" 
            @input="fun($event.target.value)">
    </template>
    
    <script>
    export default {
          
        props:{
          
            value:String
        },
    
        methods:{
          
            fun(e){
          
                this.$emit('input',e)
            }
        }
    }
    </script>

#### .sync修饰符 ####

使用v-model有一个坏处就是，子组件接收数据的键只可以使用value`props:{ value:String }`，而这个修饰符`.sync`就可以解决这个问题。  
![在这里插入图片描述][269cbbe8603b4350b253a900b633e0bb.png_pic_center]

子组件中将修改触发方法。

<template>
      <input  type="text" :value="msg" 
            @input="fun($event.target.value)">
    </template>
    
    <script>
    export default {
          
        props:{
          
            msg:String
        },
        methods:{
          
            fun(e){
          
            	//修改点update：要修改的属性名称
                this.$emit('update:msg',e)
            }
        }
    }
    </script>

父组件中的修改点：

<template>
      <div id="app">
     	
        <MyInput :msg.sync = "msg"></MyInput>
      </div>
    </template>
    
    
    <script>
    import MyInput from './components/MyInput.vue';
    
    export default {
          
      name: "App",
      data() {
          
        return {
          
          msg: "你好!vue",
        };
      },
      components:{
          
        MyInput
      },
    };
    </script>
    
    
    <style>
    #app {
          
      width: 100%;
      height: 600px;
      background-color: skyblue;
      overflow: hidden;
    }
    </style>

[7a7ece522b334534b5d65318740b6dea.png_pic_center]: https://img-blog.csdnimg.cn/7a7ece522b334534b5d65318740b6dea.png#pic_center
[bd7e84031e3a4d62b224ddabc4cc7a78.png_pic_center]: https://img-blog.csdnimg.cn/bd7e84031e3a4d62b224ddabc4cc7a78.png#pic_center
[269cbbe8603b4350b253a900b633e0bb.png_pic_center]: https://img-blog.csdnimg.cn/269cbbe8603b4350b253a900b633e0bb.png#pic_center