怎么在vue中使用slot插槽-创新互联

怎么在vue中使用slot插槽?相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。

创新互联建站主营庐山网站建设的网络公司,主营网站建设方案,app软件定制开发,庐山h5微信平台小程序开发搭建,庐山网站营销推广欢迎庐山等地区企业咨询

不使用插槽,在template中用v-html解析父组件传来的带有标签的content




  
  



  Rachel

">

使用插槽,如果父组件为空,就会显示slot中定义的默认内容


  

Rachel

Vue.component('child', {
   template: '
          

hello

          默认内容         
' })

使用插槽添加header和footer,使用‘具名插槽',也就是给插槽起个名字,各找各的位置。此处也可以写默认值,如果父组件没有对应的插槽内容的话,会显示子组件定义的插槽的默认值。


  
    header
    footer
  
Vue.component('body-content', {
  template: '
         default header          content
         default footer         ' })
vue是什么

Vue是一套用于构建用户界面的渐进式JavaScript框架,Vue与其它大型框架的区别是,使用Vue可以自底向上逐层应用,其核心库只关注视图层,方便与第三方库和项目整合,且使用Vue可以采用单文件组件和Vue生态系统支持的库开发复杂的单页应用。

看完上述内容,你们掌握怎么在vue中使用slot插槽的方法了吗?如果还想学到更多技能或想了解更多相关内容,欢迎关注创新互联行业资讯频道,感谢各位的阅读!


网页名称:怎么在vue中使用slot插槽-创新互联
地址分享:http://bzwzjz.com/article/cdoohd.html

其他资讯

Copyright © 2007-2020 广东宝晨空调科技有限公司 All Rights Reserved 粤ICP备2022107769号
友情链接: 成都网站制作 成都定制网站建设 营销型网站建设 网站设计制作 成都响应式网站建设公司 成都网站建设 重庆外贸网站建设 手机网站建设 网站建设开发 专业网站建设 成都网站建设 手机网站制作 高端品牌网站建设 专业网站设计 攀枝花网站设计 成都企业网站建设 成都网站建设 成都网站设计 成都网站制作 成都做网站建设公司 成都品牌网站设计 高端网站设计