vue中父子组件注意事项,传值及slot应用技巧-成都快上网建站

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://kswjz.com/article/pcihpo.html
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流