带名字的 slot

0
视频
0
完成
0%
进度
0
分钟
0
完成
0%
进度

再试一下有名字的 slot ... 定义一个组件 .. 名字是 card .. 提供一些选项 .. 添加一个 template 设置一下模板 .. 一组 div ,上面加上 ui card 这两个 css 类 .

它里面再包装一个 div ,上面加上 image 这个类 .. 它里面应该是一张图片 .. 这个内容可以从爸爸那里传递过来 ... 用一组 slot .. 上面加上一个 name 属性,设置一下这个 slot 的名字 .. 可以是 image .. 标签的中间可以加点默认的东西 ..

跟这个带 image 类同级别的位置上再添加一个 div ,上面加上 content 这个类 .. 它里面再包装一个 div ,上面有个 header 类 .. 在这个标签里面可以包装一个 slot ,添加一个 name 设置一下它的名字 .. 可以是 header .. 跟这个元素同一级别的地方,再添加一个包装 .. 上面加上一个 meta 类 ..

里面再用一个 slot 分发一个叫 meta 的内容 ...

回到这个 html 文档 .. 用一下刚才定义的这个 card 组件 .. 再这个组件的里面,我们可以为组件里的 slot 提供一些内容 ... 一个 img 标签 ... 添加一个 slot 属性,设置一下这个内容是给谁的 .. 名字是 image

再给这个图像标签添加一个 src,指定一个要显示的图像的地址 ..

再添加一个大标题 .. 用一个 slot ,说明一下这个标题的内容要分发给谁,这里就是 header ... 设置一下这个标题里的内容 ...

然后再用一组 div ... 它可以给 meta 这个 slot ... 里面再添加点文字 ..

现在页面上显示的就是一个 card 组件 ...

带名字的 slot《 Vue.js:组件 》

统计

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

社会化网络

关于

微信订阅号

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