1. 组件学习之内容分发
1.1 作用域插槽
父级
- {
- {
- props.text2
- }
- }
- {
- {
- props.text3
- }
- }
子级模板
- first hello
其中 child 组件首先会调用模板,然后在使用 child 组件时标签内的 template 部分将会被渲染到子组件 child 的 slot 标签中。
的值对应一个临时变量名 (保存的是对象),此变量接收从子组件中传递的 prop 对象,每个 slot 会产出一个 prop 对象,在这里就分别是{text:'hello from child',text2:'hello again'} 和{text3:'hello!!!!'},每个 slot 都会用 template 渲染一次,最终完成渲染。
- scope
注:对于组件将要分发的内容,如果没有指定 slot 名字(不是具名 slot),那么分发的内容将会在子组件中的每个 slot 中都进行渲染。
输出结果是
- first hello
- here is parent
- hello from child
- hello again
- here is parent
- hello!!!!
来源: http://www.bubuko.com/infodetail-1975054.html