vue插槽slot(加深印象)
根据的都是更新后的2.6新版本
概念:
组件预留的html模板区域,这块模板显示不显示怎样显示由父组件决定
插槽作用域
父级模板里的所有内容都是在父级作用域中编译的;子模板里的所有内容都是在子作用域中编译的。
案例分析
父组件
<template>
<div id="app">
<h1>vue自定义插槽父组件</h1>
<children-slot>
<!-- <template v-slot:header> -->
<!-- 缩写 -->
<template #header>
<h4>这是在父组件的要显示在子组件的header</h4>
</template>
<p>这是在父组件的要显示在子组件的content</p>
<p>这是在父组件的要显示在子组件的content2</p>
<template v-slot:footer="footerProps">
<p>这是在父组件的要显示在子组件的footer</p>
<!-- 此处可得到子组件定义的childrenObj的值 -->
<p>我是访问子组件定义的值{{ footerProps.childrenObj.lastname }}</p>
</template>
</children-slot>
<!-- 只有匿名卡槽才能省略写template -->
<!-- 写法1 -->
<!-- <single-slot v-slot="singleProps">
<template>
<p>我是访问单独插卡槽的值:{{ singleProps.info.last }}</p>
</template>
</single-slot> -->
<single-slot v-slot="{ info }">
<template>
<p>我是访问单独插卡槽的值:{{ info.last }}</p>
</template>
</single-slot>
</div>
</template>
<script>
import ChildrenSlot from "@/components/ChildrenSlot.vue";
import SingleSlot from "@/components/SingleSlot.vue";
export default {
name: "App",
components: {
ChildrenSlot,
SingleSlot,
},
data() {
return {};
},
};
</script>
子组件ChildrenSlot
<template>
<div id="app">
<h3>vue自定义插槽子组件包含多个</h3>
<p>具名卡槽header</p>
<slot name="header"></slot>
<!-- <slot></slot> -->
<p>具名卡槽footer</p>
<slot name="footer" v-bind:childrenObj="childrenObj">
<!-- 后备内容默认值 -->
当footer卡槽没有值时候,我是默认:{{ childrenObj.firstname }}
</slot>
</div>
</template>
<script>
export default {
name: "App",
data() {
return {
childrenObj: {
firstname: "wht",
lastname: "thw",
},
};
},
};
</script>
SingleSlot
<template>
<div>
<h4>单个匿名卡槽</h4>
<!-- 作用域插槽 绑定在 <slot> 元素上的 attribute 被称为插槽 prop。-->
<!-- 现在在父级作用域中,我们可以使用带值的 v-slot 来定义我们提供的插槽 prop 的名字 -->
<slot :info="info">
<!-- 后备内容默认值 -->
当没有的时候,我是单个卡槽默认值{{ info.first }}
</slot>
</div>
</template>
<script>
export default {
data() {
return {
info: {
first: "匿名卡槽默认值",
last: "匿名卡槽真实值",
},
};
},
};
</script>
<style></style>