标签：html com fat color default 匿名 use 组件 --
默认插槽（匿名插槽）
father.vue
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<div class="tmpl">
<span>菜单1</span>
<span>菜单2</span>
</div>
</child>
</div>
</template>
<script>
import child from "./child";
export default {
name: "father",
components: {
child
}
}
</script>
因为父组件在里面写了html模板，那么子组件的匿名插槽这块模板就是下面这样。也就是说，子组件的匿名插槽被使用了，是被下面这块模板使用了。
child.vue
<template>
<div class="child">
<h3>这里是子组件</h3>
<slot></slot>
</div>
</template>
<script>
export default {
name: "slot"
}
</script>
具名插槽
father.vue
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<div class="tmpl" slot="up">
<span>菜单1</span>
<span>菜单2</span>
</div>
<div class="tmpl" slot="down">
<span>菜单-1</span>
<span>菜单-2</span>
</div>
<div class="tmpl">
<span>菜单->1</span>
<span>菜单->2</span>
</div>
</child>
</div>
</template>
<script>
import child from "./child";
export default {
name: "father",
components: {
child
}
}
</script>
child.vue
<template>
<div class="child">
<h3>这里是子组件</h3>
<!-- 具名插槽-->
<slot name="up"></slot>
<!-- 具名插槽-->
<slot name="down"></slot>
<!-- 匿名插槽-->
<slot></slot>
</div>
</template>
<script>
export default {
name: "slots"
}
</script>
作用域插槽（带数据的插槽）
father.vue
<template>
<div class="father">
<h3>这里是父组件</h3>
<child>
<div class="tmpl" slot="up">
<span>具名插槽-up-1</span>
<span>具名插槽-up-2</span>
</div>
</child>
<child>
<div class="tmpl" slot="down">
<span>具名插槽-down-1</span>
<span>具名插槽-down-2</span>
</div>
</child>
<child>
<div class="tmpl">
<span>匿名插槽-1</span>
<span>匿名插槽-2</span>
</div>
</child>
<child-data>
<template slot-scope="props">
<span>作用域插槽</span>
{{props.data.name}}
</template>
</child-data>
</div>
</template>
<script>
import child from "./child";
import childData from "./childData";
export default {
name: "father",
components: {
child,
childData
}
}
</script>
child.vue 同上
childData.vue
<template>
<div class="child">
<!-- 作用域插槽-->
<slot :data="data"></slot>
</div>
</template>
<script>
export default {
name: "childData",
data: function () {
return {
data: {
name: ‘vue‘,
isUse: true
}
}
},
}
</script>
标签：html com fat color default 匿名 use 组件 --
原文地址：https://www.cnblogs.com/ronle/p/12179743.html
