div滚动到指定位置 vue_详解Vue中的插槽

什么是插槽

在日常的项目开发中，当我们在编写一个完整的组件时，不可避免的会引用一些外部组件或者自定义组件。

有了这种引用关系之后，我们就可以把它们称为父组件或者子组件，同时父子组件之间有很多的通信方式，比如可以通过props向子组件传递数据，或者通过$emit、$parent调用父组件中的方法。

下面就是一个非常简单的父组件引用子组件的例子。

<template>
  <div class="child">
  
    
    <div>
      <i class="el-icon-s-flag">i>Badge 标记
      <div class="content">
        <el-badge :value="12" class="item">
          <el-button size="small">评论el-button>
        el-badge>
      div>
    div>
   
    
    <div>
      <i class="el-icon-s-flag">i>进度条
      <div class="content">
        <el-progress :percentage="50">el-progress>
      div>
    div>
    
  div>
template>

接着我们在App组件中引用Child组件。

<template>
  <div id="app">
    
    <child>child>
  div>
template>
<script>import Child from './components/Child.vue'export default {
     name: 'App',components: {
     
    Child
  }
}script>

最后运行项目，子组件的内容成功被引用并展示在页面上。

那假如我们现在有这样一个需求：在引用Child组件的同时，希望在Child组件的指定位置插入一段内容：

欢迎大家关注小土豆

。

如果我们直接将内容写入内部，是不会生效的。

<template>
  <div id="app">
    
    <child>
      <h1> 欢迎大家关注小土豆 h1>
    child>
  div>
template>
<script>import Child from './components/Child.vue'export default {
     name: 'App',components: {
     
    Child
  }
}script>

可以看到并未达到预期效果：

那为了解决类似这样的问题，Vue就设计出来了slot这个东西。slot翻译过来叫做插槽，也可称其为Vue的内容分发机制，它的主要作用就是向子组件的指定位置插入一段内容，这个内容可以是HTML或者其他的组件。

默认插槽

在前面一节内容里，我们提出了一个需求：在引用Child组件的同时，希望在Child组件的指定位置插入一段内容：

欢迎大家关注小土豆

。

那这个需求如何使用插槽来实现呢？我们来实践一下。

首先我们需要在子组件中写入，同时这个在标签内部可以有默认的内容，比如我是这个slot里面本来的内容

<template>
  <div class="child">
  
    
    <div>
      <i class="el-icon-s-flag">i&g