关于Vue中的插槽问题

插槽

关于插槽的话个人理解就是在父组件中引用子组件的同时，可以对子组件的一些内容进行修改或者补充，光这么说可能不大明白，下面就来演示一下插槽的用法。

---

1.默认插槽

一般情况下如果子组件内只需要插入或修改一条内容的话，只要在其内部写入一个slot元素就可以了，不需要为其命名，这就是默认的插槽，在父组件中编写的内容都会在这个插槽中出现，如果slot元素中有默认内容会被父组件中传来的内容覆盖，示例如下：
父组件：

<template>
  <div>
    <div>{{msg}}</div>
    <child>这是往子组件内插入的内容</child>
  </div>
</template>

<script>
import child from './child.vue'
export default {
  components: {
    child
  },
  data () {
    return {
      msg: '这是父组件'
    }
  }
}
</script>

子组件：

<template>
    <div>
        <div>这是子组件</div>
        <slot></slot>
    </div>
</template>
<script>
export default {
    data() {
        return {
        }
    }
}
</script>

渲染结果：

如果子组件中slot元素内有默认内容则会被父组件中传来的值覆盖掉，这里就不放图演示了，当然传的内容也不限于是一句话，也可以是div、button、input等元素甚至于是另一个已经写好的组件，当然不建议大家为了显示自己多懂组件而去对自己要做的网页的结构过多细化，然后各种使用插槽、组件，虽然很酷炫，但涉及到组件通讯的时候会发现会弄出很多麻烦，解决掉通讯麻烦也会面临性能方面的问题，这里稍微扯得有点多，下面介绍第二种插槽。

2.具名插槽
当我们想要往子组件中插入不同作用的组件时，一个插槽就不太够用了，我们需要更多的插槽，但是如何区分这些插槽呢，我们在父组件中写入的内容会显示在哪个插槽中呢？解决办法就是对插槽进行命名，示例如下：
父组件：

<template>
  <div class="hello">
    <div>{{msg}}</div>
    <child>
      <div>这是往子组件内插入的内容</div>
      <template slot="first">
        <div>这是第一个插槽</div>
      </template>
      <template slot="second">
        <div>这是第二个插槽</div>
      </template>
    </child>
  </div>
</template>

<script>
import child from './child.vue'
export default {
  components: {
    child
  },
  name: 'HelloWorld',
  data () {
    return {
      msg: '这是父组件'
    }
  }
}
</script>

子组件：

<template>
    <div>
        <div>这是子组件</div>
        <slot></slot>
        <slot name="first"></slot>
        <slot name="second"></slot>
    </div>
</template>
<script>
export default {
    data() {
        return {
        }
    }
}
</script>

渲染效果：

3.作用域插槽
这个插槽第一次看文档的时候真的是一头雾水，不过查询资料之后还是了解了其简单的使用方法，下面就展示一下：
父组件：

<template>
  <div class="hello">
    <div>{{msg}}</div>
    <child :items="users">
      <template slot="cont" scope="props">
        {{users[props.$index].id}}
        {{users[props.$index].name}}
        {{users[props.$index].age}}
      </template>
    </child>
  </div>
</template>

<script>
import child from './child.vue'
export default {
  components: {
    child
  },
  name: 'HelloWorld',
  data () {
    return {
      msg: '这是父组件',
      users: [
        {id: 1, name: '张三', age: 20},
        {id: 2, name: '李四', age: 22}
      ]
    }
  }
}
</script>

子组件：

<template>
    <div>
        <div>这是子组件</div>
        <div v-for="(item, index) in items">
            <slot name="cont" :$index="index"></slot>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
        }
    },
    props:{
        items: Array
    }
}
</script>

效果图：

根据代码其实就可以大概看出来是怎么回事了，子组件中根据数组数据展示信息并且传了一个$index属性给父组件，父组件根据props对象接收该属性并使用，从而达到图示效果，当然这只是我的个人理解，而且也暂时没看出这个东西的应用场景，大部分情况下我们还是以前两种插槽方式进行开发。这就是关于Vue的插槽方面的讲解啦，有什么不足之处欢迎大家指出，谢谢。