vue中父子组件注意事项,传值及slot应用技巧
一.父子组件传值
创新互联是一家专业提供永定企业网站建设,专注与成都做网站、成都网站制作、H5页面制作、小程序制作等业务。10年已为永定众多企业、政府机构等服务。创新互联专业网站设计公司优惠进行中。
父子组件传值 {{total}}
二.父组件向子组件传递DOM
先看一个示例
Qin
打开查看器查看一下
发现Qin不见了
Qin
查看官方文档 , https://cn.vuejs.org/v2/guide/components-slots.html
我们得出结论:如果 child 没有包含一个 < slot > 元素,则任何传入它的内容都会被抛弃
我们加入插槽
Qin
发现Qin能正常显示,且slot将会被替换为解析后的片段 < p > Qin < /p >
当父组件不向子组件传值的时候,slot还可以作为父组件默认值出现
效果图
具名插槽
如果想使用多个插槽,我们先看看效果:
This is header
发现出现了多个header和footer,要解决这个问题就要用到具名插槽
我们修改代码如下:
This is header
可以看到显示正常了
总结
以上所述是小编给大家介绍的vue中父子组件注意事项,传值及slot应用技巧,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持!
当前题目:vue中父子组件注意事项,传值及slot应用技巧
转载来于:http://cdiso.cn/article/pcihpo.html