Vue笔记：插槽（slot）

Posted 2022-01-15 驰

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue笔记：插槽（slot）相关的知识，希望对你有一定的参考价值。

时间：2022/01/15

插槽（Slot）用于决定将所携带的内容，插入到指定的某个位置，从而使模板分块，具有模块化的特质和更大的重用性。

示例代码：

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
 </head>
 <body>
 
     <div id="app">
         
         <todo>
             <todo-title slot="todo-title" v-bind:title="title"></todo-title>
             <todo-list slot="todo-list" v-for="item in items" v-bind:list="item"></todo-list>
         </todo>
 
     </div>
     
     <script src="https://cdn.bootcss.com/vue/2.5.16/vue.min.js"></script>
 
     <script>
 
         Vue.component("todo",
             template:\'<div>\\
                         <slot name="todo-title"></slot>\\
                         <ul>\\
                             <slot name="todo-list"></slot>\\
                         </ul>\\
                     </div>\'
         );
 
         Vue.component("todo-title",
             props: ["title"],
             template:\'<div>title</div>\'
         );
 
         Vue.component("todo-list",
             props: ["list"],
             template:\'<li>list</li>\'
         );
 
         var vm = new Vue(
             el: "#app",
             data: 
                 title: "图书列表",
                 items: ["Java", "Python", "Linux"]
             
         );
 
     </script>
 
 
 </body>
 </html>

在上面的代码中，todo的template中的内容如果不加反斜杠，那么只能写在一行中，但是为了提高代码的可读性，又要使代码不出问题，就需要在每次换行的后面加上一个反斜杠来转义。除此之外，在使用slot时要注意通过name属性来将slot和对应的component进行绑定。

努力,向上,自律

以上是关于Vue笔记：插槽（slot）的主要内容，如果未能解决你的问题，请参考以下文章

VUE学习笔记：12.组件化之：slot组件插槽讲解