13518219792

NEWS

网站建设资讯

怎么在vue中使用slot插槽

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

创新互联专注于企业全网营销推广、网站重做改版、沙县网站定制设计、自适应品牌网站建设、成都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插槽的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！