生气是拿别人的错误惩罚自己。—— 康德

课程内容：
2022.09.12的学习内容：

vue基础入门（中）

1-8 组件间双向绑定高级内容

我们之前学习了v-model在组件之间如何去使用子组件，要去接收modelValue这样的参数，然后向外触发update modelValue这样的事件。‍‍

但是如果你v-model只是这样去写的话，其实它有一个局限性，比如说这里我再去写一个内容，‍‍我叫什么叫time也是给一个1，‍‍然后我想把time也传递给下面的子组件，或者说我叫做count1，还是贴下代码示例吧，这样看起来清晰一些：

传给下面组件，‍‍然后我下面再写一个同样的东西，这块我希望它用的是什么？
代码示例：

首先传一个数据过来，我传一个叫做count 等于count1，这块我去接收count1，‍‍下面我展示count1，然后当你点击的时候，我加一个handleClick1，在这里【第36行】我写一个handleClick1，‍‍然后向外触发这个事件叫做changeCountOne。‍‍它的值是 count1+3，‍‍那父组件要去接收一下@change-count-one，methods给它写个handleCountOneChange，然后 this点count1 等于你传递过来的新的count，

但你会发现其实这个时候‍‍我如果这么去写v-model的话，代码示例：

其实你count1和你上面的 count，它的功能是一模一样的，‍‍但是你v-model只能写一个，你不能写两个，

如果能写两个‍‍ v-model是不是就好了？
如果希望v-model还能在等于一个count1，是不是就完美了？代码示例：

也就是说‍‍我子组件的两个这种属性都能和我父组件的数据做双向绑定，‍‍那就想实现这个是不是最好了，怎么实现？

其实有办法的，我们可以这样去写，在这里面v-model后面我们加一个冒号，‍‍第一个我们叫做count，第二个再加一个冒号叫做count1。‍‍代码示例：

也就是说我这块‍‍把这个传递过去的参数的名字，从modelValue这个默认值变成了count和count1，‍‍

那么我接收的内容也就可以变成count和count1，下面你更新的时候‍‍你要更新count，
代码示例：

这块就是count，展示的也是count，下面这块你更新的是update，冒号count1，‍‍这是count1+3，这块就count1。‍‍好，这么去写完了之后，你会发现代码极大的减少了，

所以你会发现这么去写，你可以去写多个v-model，属性的绑定是很方便的。

这就是v-model最复杂的一块的内容了。

代码示例;

接下来来讲一个modifier【修饰符】，比如说我希望你的 model后面可以跟一个比如说captlize，把首字母大写，如果是首字母大写的话，我这个count可以这么去改，比如说我是一个a‍‍每次我向后面去加一个什么？加一个b，每次往后加一个b‍‍，是这样的count：

其实它的功能就不是数数了，它的功能是‍‍做一个越来越长的字符串，

现在我的 captlize 等于count，我写了一个修饰符。‍‍我们之前讲过v-model后面可以跟一些修饰符，但是仅限于form表单里面的一些元素上面你才可以加那些系统自带的修饰符，但现在我写了一个captalize，‍‍这是一个自定义的修饰符。‍‍

我写修饰符想让它干的一件事情是什么？每次当我点击把这个字符串变长的时候，‍‍能够把我的首字母大写，要想利用修饰符，然后实现这个功能，我们可以怎么做？

首先的话在props里面‍‍我要接收一个modelValue，这块我，我要把它写成一个对象，
然后 modelValue它是一个string类型，

我们再来接收一个内容，这个是默认的东西叫做‍‍ modelModifiers，
它指的就是你传递过来的修饰符，它是一个对象，里面有一个default，我们让它默认返回一个空对象，‍‍
此时代码示例：

这个语法的意思是什么？‍‍意思是我默认如果你v-model不传递这样的修饰符的话，‍‍那么它默认的修饰符我给它是一个空对象，但是如果你传了修饰符，‍‍那么你通过modelModifiers参数，比如说我传了 captalize，

我可以在mounted里面去做一个实验‍‍ console点log，this点modelModifiers：
此时代码示例：

代码解读：

我们通过modelModifiers来接收 captalize 这样的修饰符，

既然我写了修饰符也接收到了之后，‍‍它会存到this点modelModifiers，

我就可以通过它来做一些事情了，怎么做？‍‍
当我去点击的时候，我要让 modelValue加b，代码示例：

代码解读：

let后面我要改它的等于this点modelValue加b，
然后这块我写一个 if判断，
如果 存在这样的一个Modifiers，它是true的话，我就干什么？

newValue 等于 newValue 点capalize，‍‍修饰的功能室让字符串的首字母大写。

也就是说你有修饰符的时候，‍‍我让它首字母大写，否则的话我就什么也不做。

执行代码，点击它会报一个错误：

说capatlize不是一个js默认的函数，所以这么写是有问题的，‍‍我们可以简单一点，我们把这个修饰符改一个名字叫uppercase，不是把首字母大写，是把所有的内容都大写，‍‍因为js里有这个方法，所以我们用一下它写起来会更简单一点，就我们这样的话判断你有没有‍‍ uppercase这样的一个修饰符，如果有的话，这个方法就会把它所有的内容都转化成大写。‍‍
此时代码示例：

我们再回忆一下怎么编写的？
首先你要在v-model后面加一个点uppercase这样的修饰符的名字，‍‍
那么这个修饰符会通过props传递给子组件，子组件怎么接收？
要通过‍‍modelModifiers 来接收，这是一个固定的名字，大家不要自己去随便写。‍‍

接收的时候这块我给它的一个默认值，
它的意思是‍‍当你不传递这个修饰符的时候，我默认会给 modelModifiers 一个空对象，‍‍当你传了内容的时候，uppercase就会放到这个对象里面，所以它就会变成‍‍ uppercase:true这样的内容，

有了 modelModifiers 之后，我们再去做一些事件触发的时候，就可以结合‍‍修饰符做一些处理了，比如你有修饰符，我在向外触发这个值的时候，‍‍提前先把它变成大写，再把值给到你，所以提前你可以做一些额外的操作，这也是修饰符一般常见的作用。‍‍

小结：

如果一个组件有多个数据想通过v-model和父组件的data建立关系的时候，你可以在后面加冒号，‍‍后面跟这个数据或者参数的名字，你比如说你叫title 即 v-model:title。

你下面的这些接收的‍‍数据的名字，包括事件触发的名字都要跟着去改，才能适配这种语法。然后修饰符，自定义修饰符在Vue里面我们怎么去写的，怎么去用的，可以参考代码示例。