这次给大家带来vue中父子组件传值及slot使用剖析，vue中父子组件传值及slot使用的注意事项有哪些，下面就是实战案例，一起来看一下。
一.父子组件传值
父子组件传值
{{total}}
二.父组件向子组件传递DOM
先看一个示例
Qin
立即学习“前端免费学习笔记（深入）”；
打开查看器查看一下
发现Qin不见了
Qin 立即学习“前端免费学习笔记（深入）”；
查看官方文档 , https://cn.vuejs.org/v2/guide/components-slots.html
我们得出结论：如果 child 没有包含一个 元素，则任何传入它的内容都会被抛弃
我们加入插槽
Qin
立即学习“前端免费学习笔记（深入）”；
发现Qin能正常显示，且slot将会被替换为解析后的片段 Qin
当父组件不向子组件传值的时候，slot还可以作为父组件默认值出现
效果图
具名插槽
如果想使用多个插槽，我们先看看效果：
This is header
发现出现了多个header和footer，要解决这个问题就要用到具名插槽
我们修改代码如下：
This is header
可以看到显示正常了
相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
