<!-- 什么是插槽 ？ *插槽就是子组件中的提供给父组件使用的一个占位符，插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。 一般用slot标签来表示插槽要渲染的位置，slot的用法可以分为三类，分别是默认插槽、具名插槽、作用域插槽
父组件向子组件传递内容，内容，内容，注意是 内容！ 1、首先，在子组件中定义slot插槽位置（Child.vue 文件中) 2、在父组件中注册子组件，并使用。然后在子组件标签中填写内容，运行后，就会把父组件中填写的 内容，传递到子组件中。 3、如果子组件填写有默认内容，在父组件中没有定义内容，则显示默认的（即子组件的默认值）， 如果子组件有填写默认内容，而在父组件中有定义内容，则会覆盖子组件的内容。 总之，slot存在于子组件，v-slot在父组件，最终页面展示结果是父组件！！！ -->
| 父组件 | 子组件 |
|
<template>
<div>
<!-- 覆盖子组件内容 -->
<child>这是内容哦</child>
<!-- 默认显示子组件内容 -->
<child></child>
</div>
<hr>
<!-- 以下是具名插槽的使用 -->
<div>
<child>
<!-- 通过template临时包裹一下信息，然后用v-slot 匹配各自的slot名称
v-slot 可以缩写： #header
-->
<template #header>
<p>这是header1</p>
<p>这是header2</p>
</template>
<template #main>
</template>
<template v-slot:footer>
<p>这是footer</p>
</template>
</child>
</div>
</template> <script> import child from '../slot/Child.vue' export default { date(){ return{ } }, components:{ child } } </script> |
<template>
<div class="box">
<strong>info:</strong>
<slot>说好的,幸福呢</slot>
</div>
<!-- 以下是具名插槽的使用 -->
<!-- 定义不同名称的插槽 header、main、footer -->
<div class="container">
<header>
<slot name="header"></slot>
</header>
<main>
<slot>没有名称的slot</slot>
</main>
<footer>
<slot name="footer"></slot>
</footer>
</div>
<hr>
<!-- 作用域插槽 -->
<div>
</div> </template> <script> export default { } </script> |
--转载参考：https://cloud.tencent.com/developer/article/2061478
--end--
标签：slot,VUE,--,插槽,详解,内容,组件,填写 From： https://www.cnblogs.com/suhongzhen/p/17310643.html