vue 插槽
2021-02-26 本文已影响0人
有一种感动叫做丶只有你懂
插槽语法是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>