组件介绍
第一次封装正经组件,更加深刻地感受到了Vue的强大及其带来的便利,记录一下😄打算多搞几个练Vue3
这是一个绑定了两个自定义事件、两个具名插槽的组件,可以切换白天、黑夜两种状态,因为放了两个slot插槽因此支持自定义状态标识
食用方法
1.由于使用的是具名插槽,因此需要在该组件注册至父组件后,在组件内放入两个带有v-slot
的template
标签
2.需要通过v-slot
传值day
、night
来分别表示白天与黑夜的主题
3.day
与night
需要是一个函数
4.若插槽内不传入任何内容,则默认补充汉字“日”与“月”
码上掘金
码上掘金可以嵌套组件吗?这样似乎不好展示效果
代码
组件:
- 组件内对可能会发生样式变化的容器设置了
transition
并设置在0.3s完成过渡 - 组件内使用了ref来获取DOM节点
- 为了增加稍微丝滑一点的效果,开关中间的圆形按钮会变宽后变窄
situation
是非常重要的变量,表示目前的主题状态,当发生改变时将调用父组件传入的对应函数day
或night
,且容器样式将会发生改变
<template lang=""><div class="slip-oute