vue中父子组件注意事项,传值及slot应用技巧

一.父子组件传值

创新互联是一家专业提供永定企业网站建设,专注与成都做网站、成都网站制作、H5页面制作、小程序制作等业务。10年已为永定众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。




  
  父子组件传值
  
  


   
    
    
    {{total}}

二.父组件向子组件传递DOM

先看一个示例

Qin

打开查看器查看一下

vue中父子组件注意事项,传值及slot应用技巧

发现Qin不见了

Qin

1

查看官方文档 , https://cn.vuejs.org/v2/guide/components-slots.html

我们得出结论：如果 child 没有包含一个 < slot > 元素，则任何传入它的内容都会被抛弃

我们加入插槽

Qin

发现Qin能正常显示，且slot将会被替换为解析后的片段 < p > Qin < /p >

vue中父子组件注意事项,传值及slot应用技巧

当父组件不向子组件传值的时候，slot还可以作为父组件默认值出现

效果图

vue中父子组件注意事项,传值及slot应用技巧

具名插槽

如果想使用多个插槽，我们先看看效果：


   
    
      This is header
      This is footer

vue中父子组件注意事项,传值及slot应用技巧

发现出现了多个header和footer，要解决这个问题就要用到具名插槽

我们修改代码如下：


   
    
      This is header
      This is footer

vue中父子组件注意事项,传值及slot应用技巧

可以看到显示正常了

总结

以上所述是小编给大家介绍的vue中父子组件注意事项,传值及slot应用技巧，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！

本文标题：vue中父子组件注意事项,传值及slot应用技巧
本文地址：http://lszwz.com/article/pcihpo.html

其他资讯

售后响应及时

7×24小时客服热线

数据备份

更安全、更高效、更稳定

价格公道精准

项目经理精准报价不弄虚作假

合作无风险

重合同讲信誉，无效全额退款

乐山小谭建站工作室是一家专注从事于高品质视觉体验及互联网设计开发，乐山网站建设，乐山网站设计，乐山网页设计，乐山网站制作，品牌网站建设，营销网站建设，集团网站建设，企业网站建设，外贸网站建设，响应式网站建设，小程序开发，微信开发，企业形象设计，企业宣传视频等服务，小谭建站位于乐山市龙岗区大运软件小镇，小谭建站拥有经验丰富的高级网站建设工程师和一流的网页高端设计人员，具备各种规模与类型网站建设的雄厚实力，在网站建设领域树立了自己独特的设计风格。

友情链接交换友情链接

户外广告设计成都网站制作成都网站建设成都app软件开发公司 wap网站制作成都名片印刷梓潼网站设计小谭建站边坡防护网厂家公司网站建设

Copyright © 2022 青羊区小谭信息技术咨询服务工作室乐山建站工作室 All Rights Reserved 蜀ICP备2021004003号-25

Copyright © 2022 青羊区小谭信息技术咨询服务工作室乐山建站工作室

蜀ICP备2021004003号-25