1. vue 2.6.0版本之前的slot插槽： 用slot='' 替代表示对应的插槽。
<!--1.插槽组件中： 匿名插槽和具名插槽--> <div> <slot></slot> <slot name='content'></slot> </div> <!--2. 使用插槽组件：--> <child> <div></div> <div slot='content'></div> </child>2. vue 2.6.0版本之后的slot插槽： 用v-slot:default='ctx' 替代slot=''。
<!--1. 在slot插槽组件中：匿名插槽和具名插槽 以及向外抛值--> <div class="test-slot"> <slot :data1='data1'></slot> <slot name='main' :data2='data2'></slot> </div> <script> export default { data(){ return { data1:"我是匿名插槽", data2:"我是具名插槽" } } } </script> <!--2. 在使用插槽组件：--> <template> <div > <TestSlot> <template v-slot:default='ctx1'>{{ctx1.data1}}</template> <template v-slot:main='ctx2'>{{ctx2.data2}}</template> </TestSlot> </div> </template> <script> import TestSlot from "@/components/test-slot.vue" export default { components:{ TestSlot } } </script>
