插槽语法是Vue实现的内容分发API，用于复合组件开发。
匿名插槽
// comp
<div>
<slot></slot>
</div>
// parent
<comp>
hello
</comp>
具名插槽
// comp
<div>
<slot name="foo"> </slot>
</div>
// parent
<comp>
<template v-slot:default> </template>
</comp>
作用域插槽
将内容分发到子组件指定位置
// comp
<div>
<slot name="foo" :info="info"> </slot>
</div>
<script>
export default {
data(){
return{
info:"张三"
}
}
}
</script>
// parent
<comp>
<template v-slot:foo="slotScopes">
{{slotScopes.info}}//"张三"
</template>
</comp>
网友评论