这是我参与8月更文挑战的第26天，活动详情查看：8月更文挑战

前言：

大家好啊，又见面了，我是loncon，一个前端路上不断探索的小白，让我们开始今天的主题：讲一下vue中的插槽基础使用技巧。

插槽分类

1.匿名（默认插槽）插槽

温柔的收垃圾大叔，只要没有名字的全都收，slot写在组件template的什么位置，父组件传过来的模板将来就显示在什么位置。

<body>
       <div id="app">
          <demo>
            <p>我是插槽</p>
            <p>我也是插槽</p>
          </demo>
       </div>
    
    <script src="./vue.js"></script>
    <script>
      Vue.component('demo',{
        template:`
        <div>
          <h2>我是组件标题</h2>
          <slot></slot>
          <h3>我是组件内容</h3>
          <slot></slot>
        </div>
        `
      })
    const vm = new Vue({
       el: '#app',
       data: {
         msg: 'hello vue'
       }
    })
    </script>
    </body>

2.具名插槽

有原则的小哥，只认和自己名字相匹配的组件：slot插槽要加个name属性，属性值是插槽名

组件标签内部：标签里面放具名插槽内容

<body>
        <div id="app">
          <p>{{msg}}</p>
          <demo>
            <template v-slot:first>
             <p>我是插槽</p>
            </template>
            <template v-slot:second>
             <p>我也是插槽</p>
            </template>
          </demo>
        </div>
        <script src="./vue.js"></script>
        <script>
          Vue.component('demo', {
            template: `
            <div class = 'demo'>
              <h2>我是组件标题</h2>
              <slot name='first'></slot>
              <h3>我是组件内容</h3>
              <slot name='second'></slot>
            </div>
            `,
          });
          const vm = new Vue({
            el: '#app',
            data: {
              msg: 'hello vue',
            },
          });
        </script>
      </body>

一个组件两个具名插槽，打印结果如下：

3.作用域插槽

每个组件都是独立的，不能访问父组件

作用域插槽要求，在slot上面绑定数据，样式父组件说了算，但内容可以显示子组件插槽绑定的。

定义插槽的同时，是可以传值的，供将来使用组件时使用。

1.给插槽以添加属性的方式传值

2.添加的所有属性，都会被收集到一个对象中

{money:100,house:'大房子',row:'item'}

3.使用组件的时候，通过作用域插槽就可以接收到传递的参数

<template v-slot:default='obj'> <button @click='del()'>删除</button> </template>

总结：

事件添加原则: 模板的范围是谁的，就是用的谁的属性和方法，写在Vue.component的，方法和数据就写在这里面组件标签里的，添加的属性和方法属于实例对象

前端小白不迷路 - 今天来讲一下vue中的插槽基础使用技巧

前言：

插槽分类

1.匿名（默认插槽）插槽

2.具名插槽

3.作用域插槽

总结：