这一节我们使用自定义的v-model实现 子组件触发父组件更新
首先我们复习下v-model
在booklist.vue文件里加入测试代码
image.png
使v-model的值为当前页码值进行双向绑定
这时我在输入框中改变页码值 想应的数据也会跟着变化
效果如下
image.png
我在输入框中输入3
表示第三页
image.png
是因为我们改变了当前页码值currentPage（是vue实例对象中data里面的数据）改变data里面数据 会触发组件的重新渲染
实际上v-model是v-bind:value 和 v-on:input 事件的语法糖
我们可以写成下面的方式
image.png
v-model里面默认绑定的是value值和input事件
效果和上面一模一样
下面我们看下如何用自定义v-model实现子组件触发父组件更新
首先在父组件里面的pagebar组件上 写入v-model属性 把currentPage传入子组件
代码如下
image.png
那么子组件如何获取呢？
在父组件里面的子组件pagabar上面写入v-model会自动将value值和input事件传入子组件
只需在子组件的props属性里面加入value值即可
然后还是用emit方法触发父组件更新 只不过事件名 为v-model的input
如下
image.png
image.png
运行结果
image.png
点击图书进行分页了 并且页码值出现在下面的输入框内
以上就是在组件里面使用v-model实现子组件触发父组件更新方法 原理和原生组件是一样的
但是上面的代码有些别扭 比如说v-model默认传入给子组件的value值和input事件名
我们还可以改写这两个名字 让我们自定义名字
在vue2.2版本后提出的
写法如下
增加一个model属性在里面加入prop和event分别 表示替代value和input事件的名字
image.png
这样看起来我们的代码看起来不别扭
网友评论