栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > Web开发 > JavaScript

vue slot与传参实例代码讲解

JavaScript 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

vue slot与传参实例代码讲解

插槽分为默认插槽和具名插槽:

默认插槽: 

//父组件

  父组件
  
   默认插槽
  


//子组件

 子组件
 

具名插槽:

  注意:具名插槽需要包裹在  template  标签中,否则会报错

//父组件

  父组件
  
   
  
 
//子组件
 
  子组件
   //name="插槽名"
 

子组件向父组件传参:

//父组件 
 
  父组件
  
   
   
  
 

//子组件

结果:

补充:vue 利用slot向父组件传值

闲话不多说,上代码

子组件,里面有slot插槽,并在slot上绑定了text值


父组件通过slot-scope就可以拿到子组件slot上绑定的值,并且2.5.0版本可以用于任意元素上

这样,就可以拿到子组件里面的text值。

总结

以上所述是小编给大家介绍的vue slot与传参实例代码讲解,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/76145.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号