vue组件之子组件触发父组件更新($emit)

上节我们留了个思考的问题 子组件变化 如何触发父组件更新
这节课我们实现下（方法有几个 注意后面文章中的对比以及使用场景）
首先我们先学习下vue中的自定义事件
首先在我们的组件里面定义一个自定义事件 看下它的触发机制
首先在引用子组件的父组件里面 （子组件上面定义自定义事件）
如下
在booklist.vue里面 pagebar子组件上加入如下

image.png
v-on:自定义事件名 这种方式表示自定义事件 其中changepage为事件名 后面可以是一个表达式 也可以是个方法
然后在子组件里面如何触发这个自定义函数呢
通过emit("事件名")来触发自定义函数
如下
首先我们在methods里面定义一个change方法
执行这个方法时 改变分页样式 并且触发自定义事件changepage 引发父组件重新渲染
image.png
其中this.emit的第二个参数数据 （也就是页码i）
官方告诉我们通过emit第二个参数
image.png
运行结果
image.png
点击可以发现实现了图书列表的分页效果
如果父组件监听自定义事件处写的是一个方法
则该方法的第一个参数就是通过$emit方法传入的第二个参数值
image.png
getCurrentPageBychildComponent是methods中的一个方法
image.png
currentpagesize这个值就是子组件传过来的页码值（也就是函数的第一个参数接收值）
以上官方文档组件基础里面有讲解