内容分发——插槽solt（重点）

目录

一、插槽的作用

在开发中，我们会经常封装一个个可复用的组件：

二、插槽不同类型

需求：需要把下面的内容，让标题和内容通过插槽插入内容

（1）定义一个代办事情的组件

（2）将上面的代码留出一个插槽，即slot

（3）定义一个名为todo-title的待办标题组件 和 todo-items的待办内容组件

（4）slot通过name和组件绑定

（5）实例化Vue并初始化数据

（6）将数据通过插槽插入预留出来的位置

说明：

slot：

   插槽使用的目的：

---

一、插槽的作用

在开发中，我们会经常封装一个个可复用的组件：

• 前面我们会通过props传递给组件一些数据，让组件来进行展示；
• 但是为了让这个组件具备更强的通用性，我们不能将组件中的内容限制为固定的div、span等等这些元素；
• 比如某种情况下我们使用组件，希望组件显示的是一个按钮，某种情况下我们使用组件希望显示的是一张图片，我们应该让使用者可以决定某一块区域到底存放什么内容和元素。

二、插槽不同类型

在定义组件时，在template中用slot来占个坑；使用时，将组件之间的内容来填坑。

在Vue.js中我们使用``元素作为承载分发内容的出口，可以称其为插槽，可以应用在组合组件的场景中

需求：需要把下面的内容，让标题和内容通过插槽插入内容

            <p>列表书籍</p>
        <ul>
            <li>JAVA</li>
            <li>Linux</li>
            <li>Python</li>
        </ul>

（1）定义一个代办事情的组件

 Vue.component('todo',{
        template:'<div>\
                <div>列表书籍</div>\
                <ul>\
                    <li>Java</li>\
                </ul>\
            </div>'
    });

（2）将上面的代码留出一个插槽，即slot

    //插槽
    Vue.component("todo", {
        template:
        //这个slot就是插槽，