圆月山庄资源网 Design By www.vgjia.com
使用slots 分发内容
使用组件时常常会有组件组合使用的情况,如下:
<componentA> <componentB></componentB> <componentC></componentC> </componentA>
直接套用组件的话,父级组件会将子级组件覆盖掉,不能实现需求的效果,为了实现该效果就需要使用 slots来内容分发
slots的使用方法如下:
<body> <div id="app"> <app> <child></child> <child2></child2> </app> </div> </body> <script> Vue.component('app',{ template:' <div> <slot>没有则显示这个</slot> <li>111</li> <li>222</li> <li>333</li> </div> ', }) var app=new Vue({ el:'#app', components:{ 'child':{ template:'<div>hello word</div>' }, 'child2':{ template:'<div>hello vue js</div>' } } }) </script>
<app></app>标签没有引入其他组件时显示为图1,有其他组件时显示为图2
同时可以实测到可以引入多个并列的组件,组件会依次显示
但是这只能解决单个 组件的引入 ,实际应用中需要多个应用的组件会在多个位置,为了解决这个问题,就得确定slot位置的唯一性为了确定slot 的vue 中可以给slot 添加行内 name来识别 ,
需要注意的是:同一父级下的slot 添加行内 name必须保证唯一;
子组件下的slot 的name 是可以与父级组件的slot name 重复的,及每一级具有相对独立性。
代码效果图如下:
<body> <div id="app"> <app> <child slot="slot1"> </child> <div slot="slot2">How to use slot"slot1">没有则显示这个</slot> <li>111</li> <li>222</li> <slot name="slot2">没有则显示这个</slot> <li>333</li> </div> ', }) var app=new Vue({ el:'#app', components:{ 'child':{ template:'<div>hello word <li>22222</li> </div>' }, 'child2':{ template:'<div>hello vue js</div>' } } }) </script>
以上这篇vue slots 组件的组合/分发实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
标签:
vue,slots,组合,分发
圆月山庄资源网 Design By www.vgjia.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
圆月山庄资源网 Design By www.vgjia.com
暂无评论...
更新日志
2024年10月07日
2024年10月07日
- 班得瑞原装进口《第二张新世纪专辑:寂静山林》1CD[APE/CUE分轨][327.1MB]
- Beyond.1989-真的见证(2024环球MQA-UHQCD限量版)【环球】【WAV+CUE】
- 陈怡婷.2024-予你的心谁来赔【福茂】【FLAC分轨】
- 陈冠希.2003-HITS.OR.MISSES【英皇娱乐】【WAV+CUE】
- 班得瑞原装进口《第三张新世纪专辑:春野》1CD[APE/CUE分轨][278.9MB]
- 班得瑞原装进口《第四张新世纪专辑:蓝色天际》1CD[APE/CUE分轨][284.8MB]
- 班得瑞原装进口《第五张新世纪专辑:迷雾森林+EP》1CD[APE/CUE分轨][334.2MB]
- 田震.1997-顺其自然(日版)【红星生产社】【WAV+CUE】
- 小虫.1996-想得太美【滚石】【WAV+CUE】
- 谢采妘.2016-邓丽君名曲专辑【丰荣】【WAV+CUE】
- 张含韵.2007-一人一梦【天中文化】【WAV+CUE】
- 蟑螂乐队.1999-帮个忙【福茂】【WAV+CUE】
- 张宇.2001-替身【EMI百代】【WAV+CUE】
- 班得瑞原装进口《第六张新世纪专辑:日光海岸》1CD[APE/CUE分轨][339.5MB]
- 班得瑞原装进口《第七张新世纪专辑:梦花园》1CD[APE/CUE分轨][331.4MB]