代码示例:

【Vue】父子组件间如何通过事件进行通信(2)_数据

我们现在写的代码是父组件 向子组件传递了一个‍‍ count 这样的数据,子组件触发一些事件,再去改变子组件里面的数据,‍‍它很类似于我们之前讲过的一个语法叫v-杠model。

我们回想一下v-model怎么用的?‍‍‍‍当时我们用的是input框这种形式,比如说input v-model等于text这样的写法,‍‍代码示例如下:

【Vue】父子组件间如何通过事件进行通信(2)_代码示例_02

它的意思是什么?它的意思是input这个标签它里面的value值‍‍和我的text数据应该在这里定一个数据,比如说hello world,‍‍【第15行】

我的input显示的内容和text数据做了一个双向绑定,数据变,‍‍我input的值就会变,
而input触发一些事件的时候,我也会回过来‍‍改变text里面的数据。

所以和我们现在的 counter 是不是一样的?‍‍counter 接受一个数据,当这个数据发生变化的时候,counter的展示会变,counter触发一些事件的时候,‍‍同样反过来也会改变你数据里面的 count,所以它用v-model去做一些表示是很类似的,‍‍我们就会想我们现在的代码能不能通过v-model来对它进行简化?实际上是可以的。

如果我想简化我要怎么写?‍‍首先在这里面我的 count‍‍就不能作为参数来传递了。‍‍【第24行】
首先我们要把 count 改成modelValue,实际上就是改一个传递参数的名字,‍‍这块我接收也变成modelValue,我展示也变成modelValue。
代码示例:

【Vue】父子组件间如何通过事件进行通信(2)_vue.js_03

当我点击的时候会触发事件,触发的事件也不叫做 add 这个事件了,我们把它叫做update冒号modelValue,‍‍

然后在第19行写 v-model‍‍等于count就可以了。‍‍

代码示例:

【Vue】父子组件间如何通过事件进行通信(2)_代码示例_04

当你点击的时候,你触发 modelValue 事件,这块你要用this点modelValue,‍‍
这段代码怎么去理解它?

首先我定义了一个数据叫做count,我把它传递给子组件,通过v-model传递给子组件,
子组件 如果能够通过v-model去使用 count的话,要满足几个点:

第一个点是你接收的参数,‍‍名字必须叫做modelValue,这是一个约定俗成的规则,是个写死的值。如果你写成其他的内容,‍‍比如说你改成modelValue1,你会发现它就不好用了,大家可以自己试试,我就不试了,是肯定的。

modelValue 是一个固定的名字,‍‍然后在里面就可以直接用 modelValue了,通过v-model指令,它就会把modelValue传过来,‍‍点击的时候你要向外触发事件,触发事件的这个名字,一定要叫做update:modelValue,‍‍这也是固定的一个名字

你会向外触发一个值,这个值实际上‍‍触发到父组件之后,就会自动的把以前的 count 给它替换掉。‍‍这就是当我去组件上面写v-model指令的写法,

当然有的时候比如说我不想让它叫做modelValue,‍‍我可以怎么写?
代码示例:

【Vue】父子组件间如何通过事件进行通信(2)_数据_05

我可以给它起成比如说就叫app,【注意牵一发动全身,就是这里改了其他地方是不是也要改?问问自己这个问题】

如果我想这样把它传递过来的参数换一个名字,‍‍我可以怎么办?
我可以在v-model后面加一个冒号:app,它就会把你传递过来的参数名字改成app:

【Vue】父子组件间如何通过事件进行通信(2)_数据_06

所以父子组件如果存在一个双向绑定的关系的时候,我们可以把刚才那种‍‍复杂的代码缩减成v-model 这样简写的代码,最简洁的方式就会变成这样的样子。‍‍

好,遇到这块的点,如果大家在项目中会遇到‍‍一些双向绑定的情况的时候,可以考虑自己去写子组件的时候,在里面借助‍‍ update:modelValue这样的默认的语法,然后实现一个v-model指令,从而去简化你的代码。‍‍