前端路线--Vue(day28)

webpack

//子组件中



//父组件中中使用
import Slotdefau from "./Slotdefau.vue";
components: {Slotdefau},
    

有的时候子组件的插槽可能并非一个，这个时候就需要给slot指定一个name属性。

//子组件中



//父组件中使用
         import SlotName from "./SlotName .vue";
	 components: {SlotName },
        
        
        
             
            

            
        

我们可以将其叫做带数据的插槽，当数据在子组件中，但是插槽中渲染数据的节点由父组件决定，这种情况下，就需要使用作用域插槽。

//子组件中使用 solt 插槽将数据 传递至父组件





//父组件中使用作用域插槽
	import SlotScope from "./SlotScope .vue";
	components: {SlotScope },
        
        
        
        
            
            
作用域插槽的值++{{scope}}
        

每一个 都可以设置默认值，当外部没有给插槽传递内容时，插槽就可以使用自己的默认值：

注意：当有值传递时，插槽的默认值也会显示出来