zoukankan      html  css  js  c++  java
  • Vue中slot与slot-scope的理解及使用

    以前使用过vue,但是从来没有用过插槽slot,最近突然看到slot,发现有点不会用,因此决定系统的学习一下插槽slot。

    但是在查看了vue文档后,感觉说的太笼统,让人难以理解,因此在网上查了很多资料,终于感觉自己对插槽slot有了一定的了解,决定记录下来,希望能帮到和我一样对插槽slot不懂的朋友。

    对于官网文档中说的我就在此不复述了,感觉如果看懂的了的,也就不需要阅读这篇文章了。

    首先要知道,插槽分两类,默认插槽和具名插槽;通俗理解就是默认插槽是没有名称的插槽,具名插槽是有名称的插槽。

    何时使用插槽?

    简单的举个栗子:有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的值。

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

    以上就是我对vue中插槽的理解,有不对的地方欢迎指出,我们一起进步,一起学习。

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

  • 相关阅读:
    Jzoj4822 完美标号
    Jzoj4822 完美标号
    Jzoj4792 整除
    Jzoj4792 整除
    Educational Codeforces Round 79 A. New Year Garland
    Good Bye 2019 C. Make Good
    ?Good Bye 2019 B. Interesting Subarray
    Good Bye 2019 A. Card Game
    力扣算法题—088扰乱字符串【二叉树】
    力扣算法题—086分隔链表
  • 原文地址:https://www.cnblogs.com/passkey/p/14291370.html
Copyright © 2011-2022 走看看