用户登录

在定义组件的时候里可以使用 slot 添加一些内容插槽,这样在使用这些带内容插槽的组件的时候,可以设置这些内容插槽里的内容。

比如在之前我们定义的这个 AppButton 组件里面,可以添加一个默认的内容插槽,放在这组 button 元素里面,这样就可以去掉在这里绑定输出的 text 属性了。换成一组 slot,没有特别设置的话,这里就是这个组件默认的内容插槽。

在组件开始与结束之间的东西就会放到这个默认的内容插槽里。打开 App 组件,使用这个 AppButton 组件的时候,这次就不需要 text 属性了。可以把按钮文字放在组件的开始与结束之间,因为这里的内容会放到组件默认的那个内容插槽里显示。

在浏览器上观察一下,你会发现,按钮上的文字就是 提交,也就是我们在使用 AppButton 组件的时候,给它的默认的内容插槽设置的东西。

slot:在 Vue 组件里用插槽分发内容《 Vue.js 前端应用 #4:高级组件 》

统计

14696
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点