v-model与.sync修饰符的区别

在日常开发的过程中,v-model指令是经常用到的,一般来说 v-model 指令在表单及元素上创建双向数据绑定,但 v-model 本质是语法糖。但提到语法糖,这里就不得不提另一个与v-model有相似功能的双向绑定语法糖了,这就是 .sync修饰符。在这里就两者的使用进行一下总结:

一、v-model

1. 作用

相信使用过vue框架的朋友对这个指令不会感到陌生,v-model是用来进行、及 <select> 元素上数据的双向绑定的<br />例如:<br /><template><div><input v-model="value" type="text"> //这里的v-model里面的value可以直接获取到用户的输入值 </div> </template> <script> <strong>import</strong> son <strong>from</strong> ‘@/yanshi/son.vue’ <strong>data</strong>() { <strong>return</strong> { value: ‘’ <em>//这里定义的value变量可以直接将上面获取到的值进行操作</em> } } } </script><br />当我们在input输入框里面输入了某个在值的时候,下面就可以直接获取到我们的输入值,而不需要操作dom元素进行获取 <a name="mpHoU"></a></p> <h3 id="ai75tg"><a name="ai75tg" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2.v-model的本质</h3><p>v-model的本质上来说,是一个<strong>语法糖</strong><br />目前咱们习惯性的写法是这样的:<br /><input v-model="val" type="text"><br />但是实质上的完整写法:<br /><input :value="val" @input="val=$event.target.value" /> <br />也可以将@input后面写成一个函数,然后在methods中进行赋值操作。<br />要理解这行代码，首先你要知道 input 元素本身有个input 事件，这是 HTML5 新增加的，类似 onchange ，每当输入框内容发生变化，就会触发 input 事件，把最新的value值传给传递给val ,完成双向数据绑定的效果 。<br /><strong>我们仔细观察语法糖和原始语法那两行代码，可以得出一个结论：</strong><br />在给 <input />元素添加 v-model 属性时，默认会把 val作为元素的属性，然后把input事件作为实时传递 value 的触发事件<br /><strong>注意:</strong> <strong>不是所有能进行双向绑定的元素都是input事件。</strong> <a name="VeTvO"></a></p> <h3 id="605dm5"><a name="605dm5" class="reference-link"></a><span class="header-link octicon octicon-link"></span>3. v-model的特殊用法</h3><p>一般情况,咱们使用v-model主要是用于数据的双向绑定,可以十分方便的获取到用户的输入值。但在某些特殊情况下,我们也可以将v-model用于父子组件之间数据的双向绑定。这里需要用到父子传值的相关知识:<br /><template> <div> <son v-model="num"></son> //使用子组件 </div> </template> <script> <strong>import</strong> son <strong>from</strong> ‘@/yanshi/son.vue’ <em>//引入子组件</em> <strong>export</strong> <strong>default</strong> { components: { son <em>//注册子组件</em> }, <strong>data</strong>() { <strong>return</strong> { num: 100 } } } </script> 复制代码<br />这里咱们先定义了一个father组件和一个son组件,并且将son组件引入到father组件中,并且给son组件绑定了v-model进行了传值。此时,我们需要到son组件中接收这个值并且使用他:<br /><template> <div> 我是son组件里面接收到的值: {{ value }} </div> </template> <script> <strong>export</strong> <strong>default</strong> { props: { value: { type: Number, required: true } } } </script> 复制代码<br /><strong>注意:</strong> 我们这里接收的值必须是value,写成其他名字将无法使用<br /><strong>一般情况下的父向子传值,子组件中是不能直接修改的,在这里我们在子组件中直接修改这个值会进行报错</strong><br />例如:<br /><template> <div> 我是son组件里面接收到的值: {{ value }} <button @click="value+=1">点我value+1</button> </div> </template> 复制代码<br /><strong>错误信息</strong> <img src="https://cdn.nlark.com/yuque/0/2022/webp/219938/1657611976241-55b66c49-7642-40fc-a81f-2ed82cc60563.webp#clientId=u2cf86b50-b78e-4&crop=0&crop=0&crop=1&crop=1&from=paste&id=ue6861010&margin=%5Bobject%20Object%5D&originHeight=217&originWidth=1797&originalType=url&ratio=1&rotation=0&showTitle=false&status=done&style=none&taskId=uc8ebd592-543a-44e3-9d4b-8292a5b5b89&title=" alt=""><br />当我们需要将修改这个值时,就需要再将其传入父组件进行修改。<br /><strong>这就需要在父组件的子组件标签上定义一个自定义的事件,通过在子组件中使用$emit(‘自定义事件名’,值)的方法将值传入父组件</strong><br />在这里我们不能使用自定义的事件,因为我们用的是v-model进行的传值,所以我们只能使用input事件进行修改<br />父组件中定义一个@input方法,再设置一个形参val接收子组件的传值,<br /><template> <div> {{ num }} <son v-model="num" @input="val=>num=val" /> </div> </template> 复制代码<br />子组件中使用$emit()方法.调用父组件中的事件,并且进行传值<br /><template> <div> 我是son组件里面接收到的值: {{ value }} <button @click="$emit('input',value+1)">点我value+1</button> </div> </template> 复制代码<br />这样的话,就可以完成父子组件之间的数据双向绑定效果,并且不会出现报错 <a name="KHhXQ"></a></p> <h1 id="fcmmkf"><a name="fcmmkf" class="reference-link"></a><span class="header-link octicon octicon-link"></span>二、.sync修饰符</h1><p><a name="jMO8z"></a></p> <h3 id="777k6i"><a name="777k6i" class="reference-link"></a><span class="header-link octicon octicon-link"></span>1. .sync修饰符作用</h3><p>相比较与v-model来说,sync修饰符就简单很多了:<br /><strong>.sync修饰符可以实现子组件与父组件的双向绑定，并且可以实现子组件同步修改父组件的值。</strong> <a name="hjTYP"></a></p> <h3 id="4cakso"><a name="4cakso" class="reference-link"></a><span class="header-link octicon octicon-link"></span>2. .sync修饰符本质</h3><p><em>// 正常父传子： </em> <son :a="num" :b="num2"></son> <em>// 加上sync之后父传子： </em> <son :a.sync="num" .b.sync="num2"></son> <em>// 它等价于</em> <son :a="num" @update:a="val=>num=val" :b="num2" @update:b="val=>num2=val"></son> <em>// 相当于多了一个事件监听，事件名是update:a，回调函数中，会把接收到的值赋值给属性绑定的数据项中。</em> 复制代码<br />这里面的传值与接收与正常的父向子传值没有区别,唯一的区别在于往回传值的时候$emit所调用的事件名必须是update:属性名 ,事件名写错不会报错,但是也不会有任何的改变,这点需要多注意。 <a name="kx7ui"></a></p> <h1 id="bfmmqe"><a name="bfmmqe" class="reference-link"></a><span class="header-link octicon octicon-link"></span>总结</h1><p><a name="PVn9y"></a></p> <h5 id="6dc5a4"><a name="6dc5a4" class="reference-link"></a><span class="header-link octicon octicon-link"></span>.sync与v-model区别是</h5><p><strong>相同点</strong>：都是语法糖，都可以实现父子组件中的数据的双向通信。<br /><strong>区别点</strong>：格式不同： v-model=“num”, :num.sync=“num”<br />v-model： @input + value<br />:num.sync: @update:num<br /><strong>另外需要特别注意的是:</strong> <strong>v-model只能用一次；.sync可以有多个。</strong></p>