526互联

Vue中slot与slot-scope的理解及使用

发布时间 2023-06-13 10:46:08作者: China Soft

https://www.cnblogs.com/sherryweb/p/15437298.html

 

插槽分两类，默认插槽和具名插槽；通俗理解就是默认插槽是没有名称的插槽，具名插槽是有名称的插槽。

何时使用插槽？

简单的举个栗子：有2个组件，父组件father，子组件son。

父组件 father

复制代码
 
<template>
  <div>
    <h3>这是父组件</h3>
    <son>实践slot</son>
  </div>
</template>
复制代码

子组件 son

复制代码
 
<template>
  <div>
    <h4>这是子组件</h4>
    <input type="text" placeholder="请输入">
  </div>
</template>
复制代码

一般我们的组件都会怎么写，但是这么写的话，会发现子组件中的实践slot是显示不出来的。如果需要让他显示出来，这时我们就可以用到插槽slot了。

如何使用插槽？

首先，子组件中我们要添加插槽slot，

复制代码
 
<template>
  <div>
    <h4>这是子组件</h4>
    <input type="text" placeholder="请输入">
    <slot></slot>
  </div>
</template>
复制代码

这时，终于出现了slot。slot的位置就会出现父组件中实践slot这几个大字。

如图：

可以看到，这里面slot是没有名称的，顾名思义，这是插槽中的默认插槽。

然后在看看具名插槽，直接上代码，一目了然，

父组件

复制代码
 
<template>
  <div>
    <h3>这是父组件</h3>
    <son><span>实践slot</span></son>
    <son>
       <template slot="myslot">
          <div>实践具名slot</div>
       </template>
    </son>
  </div> 
</template>
复制代码

子组件

复制代码
 
<template>
  <div>
    <h4>这是子组件</h4>
    <input type="text" placeholder="请输入">
    <slot></slot>
    <slot name="myslot"></slot>
  </div>
</template>
复制代码

可以看出，和默认插槽不同的是，在子组件中，我们给插槽一个name属性，这个就是插槽的名称，同时在父组件中，我们在需要将内容插入的地方标签上加了一个slot属性，他的值就是我们的slot 名称name。

效果如下图：

上面就是2中插槽，默认插槽和具名插槽的用法。

下来是slot-scope。slot-scope是作用域插槽。

官网中有一句特别强调的话：父组件模板的所有东西都会在父级作用域内编译；子组件模板的所有东西都会在子级作用域内编译。简单的所，就是父组件中不能直接用自组件中定义的data数据。而slot-scope的出现就是解决了这样的问题。如下代码

父组件

复制代码
 
<template lang="">
  <div>
    <h3>这是父组件</h3>
    <son>
      <template slot="myslot" slot-scope="scope">
        <ul>
          <li v-for="item in scope.data">{{item}}</li>
        </ul>
      </template>
    </son>
  </div> 
</template>
复制代码

子组件

复制代码
 
<template>
  <div>
    <h4>这是子组件</h4>
    <input type="text" placeholder="请输入">
    <slot name="myslot" :data='list'></slot>
  </div>
</template>
 
<script>
  export default {
    name:'Son',
    data(){
      return{
        list:[
          {name:"Tom",age:15},
          {name:"Jim",age:25},
          {name:"Tony",age:13}
        ]
      }
    }
  }
</script>
复制代码

首先先看下效果，

其中，下方三个对象的值，我们本身是在子组件中定义的，按照官方文档中说的，本来父组件中是无法显示出来这些数据的，但是为什么现在显示出来了呢？？？这就要归功于我们强大的slot-scope了。

首先，在子组件中的插槽上有一句data="list"，而在父组件中也有slot-scope="scope"，slot-scope就是取data的值，slot-scope的值是自定义的，我们可以取任何名称，但是data的值传过来时是以对象形式传输的，所以在这scope.data才是list的值。

这样我们就可以在父组件中取到子组件的值，并且加以应用了。

 

PS:转自Vue中slot与slot-scope的理解及使用_fang562878311的博客-CSDN博客

本文链接：https://www.cnblogs.com/passkey/p/14291370.html

https://blog.csdn.net/fang562878311/article/details/100579007?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.control