VUE中的插槽使用详解

 

<!-- 什么是插槽 ？

    *插槽就是子组件中的提供给父组件使用的一个占位符，插槽显不显示、怎样显示是由父组件来控制的，而插槽在哪里显示就由子组件来进行控制。

    一般用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--