这一节我们利用作用域插槽对上几节学的图书分页组件页码进行自定义样式
image.png
如图我们上几节写的分页组件 页码 是通过这种方式显示的 其中第和页两个字是写死的
页码是通过变量i取到的 如果我们想自定义这分页页码显示 就不该这样写死显示
就需要用到插槽
下面看下代码
首先子组件内部写入插槽代码
在pagebar.vue里面写入
image.png
官方告诉我们插槽内部 可以通过v-bind的方式传递 属性
这里把pagestr属性传递到父组件（也就是引用pagebar的组件内部）父组件里面接收到的是一个对象（props）在父组件里面取值如下
image.png
首先在组件肚子内部写入元素 然后匹配插槽名字 这里的slot-scope即为作用域插槽
其接收子组件里面传递过来的属性
这里还可以用es2015的解构方式修改如下
image.png
运行效果
image.png
我们可以修改下分页样式
image.png
运行结果
image.png
如果我们的父组件内部没有实现具体插槽的内容 那么分页将不会显示任何内容
image.png
image.png
所以在子组件插槽内部需要写入默认的分页代码 父组件没有具体实现插槽内容
则使用默认的
image.png
运行结果
父组件没有实现具体插槽
image.png
实现了插槽内容
image.png
可以根据不同情况 显示不同的分页样式和内容
网友评论