1.4 Vue组件的核心概念：插槽

一、默认插槽

1. 比如todo-list，我定义好了格式后，内容我想要自定义我想要的样式，比如

   		<todo-list>
               <todo-item @remove-delete="handleDelete" v-for="item in list" :title="item.title" :del="item.del"></todo-item>
           </todo-list>
   
   // 模板中
   Vue.component('todo-list', {
               template: `
                   <ul>
                       
                   </ul>
               `,
               data: function() {
                   return {
                       
                   }
               }
           })
   
   同时将数据放在外部
   		var vm = new Vue({
               el: '#app',
               data: {
                   message: 'hello world',
                   list: [{
                           title: '课程1',
                           del: false,
                       },{
                           title: '课程2',
                           del: true,
                       }]
               	}
   			}

   这样一来，保证了展示内容的多一多样，但是显示失败了，解决办法：

   	Vue.component('todo-list', {
               template: `
                   <ul>
                       <slot></slot>
                   </ul>
               `,
               data: function() {
                   return {
                       
                   }
               }
           })

   在模板声明中加入默认插槽即可解决

二、具名插槽

1. 如果出现多种内容，添加多灵活性的话——具名插槽

   比如todo-list中，内个内容需要加上前置图标与后置图标，同时传入并可以自动以类型的话，操作如下：

       <div id="app">{{message}}
           <div v-bind:id="message"></div>
           <todo-list>
               <todo-item @remove-delete="handleDelete" v-for="item in list" :title="item.title" :del="item.del">
                   <span slot="pre-icon">前置图标</span>
                   <span slot="suf-icon">后置图标</span>
               </todo-item>
           </todo-list>
       </div>
   
   // 定义的模板属性
               template: `
                   <li>
                       <slot name="pre-icon"></slot>
                       <span v-if="!del">{{title}}</span>
                       <span v-else style="text-decoration: line-through;">{{title}}</span>
                       <slot name="suf-icon"></slot>
                       <button v-show="!del" @click.stop=handleClick>删除</button>
                   </li>
               `

   外部内容使用slot=属性设定被调用插槽名称，模板中使用name=进行名称的绑定调用，实现插槽功能

   • 2.6更新函数操作，方式如下

         <div id="app">{{message}}
             <div v-bind:id="message"></div>
             <todo-list>
                 <todo-item @remove-delete="handleDelete" v-for="item in list" :title="item.title" :del="item.del">
                     <template v-slot:pre-icon>
                         <span>前置图标</span>
                     </template>
                     <template v-slot:suf-icon>
                         <span>后置图标</span>
                     </template>
                 </todo-item>
             </todo-list>
         </div>

   三、作用域插槽

   1. 可以接收子组件传递的值

   2. 从父组件中拿到子组件的值，并选择渲染

              <todo-list>
                  <todo-item @remove-delete="handleDelete" v-for="item in list" :title="item.title" :del="item.del">
                      <template v-slot:pre-icon>
                          <span>前置图标</span>
                      </template>
                      <template v-slot:suf-icon ="{value}">
                          <span>后置图标{{value}}</span>
                      </template>
                  </todo-item>
              </todo-list>
      
      Vue.component('todo-item', {
                  // 属性声明
                  props: {
                      title: String,  // 直接定义类型，没有默认值
                      del: {
                          type: Boolean,  // 定义类型
                          default: false  // 默认值
                      },
                  },
                  // 绑定对象 
                  data: function() {
                      return {
                          val: Math.random()
                      }
                  },
                  // 方法
                  methods: {
                      handleClick() {
                          console.log("点击了删除按钮")
                          // 向外抛出事件，以及丢出参数
                          this.$emit('remove-delete', this.title)
                      }
                  },
                  // 模板
                  template: `
                      <li>
                          <slot name="pre-icon"></slot>
                          <span v-if="!del">{{title}}</span>
                          <span v-else style="text-decoration: line-through;">{{title}}</span>
                          <slot name="suf-icon" :value="val"></slot>
                          <button v-show="!del" @click.stop=handleClick>删除</button>
                      </li>
                  `
              })

   四、给插槽设置默认值

               template: `
                   <li>
                       <slot name="pre-icon">这是默认值</slot>
                       <span v-if="!del">{{title}}</span>
                       <span v-else style="text-decoration: line-through;">{{title}}</span>
                       <slot name="suf-icon" :value="val"></slot>
                       <button v-show="!del" @click.stop=handleClick>删除</button>
                   </li>
               `

   备注：直接在内容中写死默认值即可，如果没有添加插槽内容，那么会走默认值

整体页面代码：

<!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">{{message}}
        <div v-bind:id="message"></div>
        <todo-list>
            <todo-item @remove-delete="handleDelete" v-for="item in list" :title="item.title" :del="item.del">
                <!-- <span slot="pre-icon">前置图标</span>
                <span slot="suf-icon">后置图标</span> -->
                <!-- <template v-slot:pre-icon>
                    <span>前置图标</span>
                </template> -->
                <template v-slot:suf-icon ="{value}">
                    <span>后置图标{{value}}</span>
                </template>
            </todo-item>
        </todo-list>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>

    <script>

        Vue.component('todo-item', {
            // 属性声明
            props: {
                title: String,  // 直接定义类型，没有默认值
                del: {
                    type: Boolean,  // 定义类型
                    default: false  // 默认值
                },
            },
            // 绑定对象 
            data: function() {
                return {
                    val: Math.random()
                }
            },
            // 方法
            methods: {
                handleClick() {
                    console.log("点击了删除按钮")
                    // 向外抛出事件，以及丢出参数
                    this.$emit('remove-delete', this.title)
                }
            },
            // 模板
            template: `
                <li>
                    <slot name="pre-icon">这是默认值</slot>
                    <span v-if="!del">{{title}}</span>
                    <span v-else style="text-decoration: line-through;">{{title}}</span>
                    <slot name="suf-icon" :value="val"></slot>
                    <button v-show="!del" @click.stop=handleClick>删除</button>
                </li>
            `
        })

        Vue.component('todo-list', {
            template: `
                <ul>
                    <slot></slot>
                </ul>
            `,
            data: function() {
                return {
                    
                }
            }
        })

        var vm = new Vue({
            el: '#app',
            data: {
                message: 'hello world',
                list: [{
                        title: '课程1',
                        del: false,
                    },{
                        title: '课程2',
                        del: true,
                    }]
            },
            methods: {
                handleDelete(val) {
                    console.log("handleDelete点击了删除", val)
                }
            }
        })
    </script>
</body>
</html>