vue组件之父子组件 属性传递

上节课说到了 分页有可能是通用部分 其他用户列表 新闻列表 可能都会用到
并且vue里面组件可以嵌套组件（也就是父子组件）
下面我们看下将分页代码抽离出来 体现下父子组件 并且了解下数据传输的套路（属性传递 数据发生变化怎么办）
下面先将分页组件抽离
在项目目录下创建一个common文件夹 里面创建一个pagebar.vue表示分页组件
如下

image.png

pagebar.vue里面如下

image.png
父组件booklist.vue引用子组件pagebar.vue
image.png
image.png
image.png
在模板里面把allsize属性传给子组件pagebar 然后接受总条数
以上就是父组件把属性传递给子组件pagabar的过程
运行效果
image.png

但是点击没什么效果
是因为我们在子组件里面点击修改了current的值 仅仅是样式发生了变化 并没有触发父组件的重新获取值和渲染
我们思考下 子组件值发生变化 如何影响父组件