理解vue中的slot与slot-scope

vue的slot和slot-scope

对于vue的slot和slot-scope在写vue项目的时候总是很朦胧！vue的文档有比较精简。vue slot文档

先说说slot是啥!都知道的slot叫插槽，其实也好理解，通俗点就是插到某一部分（-_-||）PS：想象一下电脑，有插CPU的，有插显卡的，有插内存的，有插硬盘的~。术语的话就是占位符吧（至少我是这么理解的）。作用就是内容的分发。

值得注意的是：内容要写在父组件中，然后分给需要的子组件。当slot多个时，可以通过name来加以区分，这就是所谓的具名插槽。

举个栗子：

• 默认插槽

父组件：

<template>
    <div class="father">
        <h3>这里是菜单</h3>
        <child>
            <div class="list">
              <li>口水鸡</li>
              <li>口水鸭</li>
              <li>口水猪</li>
              <li>口水驴</li>
              <li>口水羊</li>
              <li>口水牛</li>
            </div>
        </child>
    </div>
</template>

　　子组件：

 

<template>
    <div class="child">
        <h3>这里是餐桌点餐</h3>
        <slot></slot>
    </div>
</template>

 

• 具名插槽 PS:官网案例

　　父组件：

 

<base-layout>
  <template slot="header">
    <h1>Here might be a page title</h1>
  </template>

  <p>A paragraph for the main content.</p>
  <p>And another one.</p>

  <template slot="footer">
    <p>Here's some contact info</p>
  </template>
</base-layout>

　　子组件：

1 <base-layout>
2   <h1 slot="header">Here might be a page title</h1>
3 
4   <p>A paragraph for the main content.</p>
5   <p>And another one.</p>
6 
7   <p slot="footer">Here's some contact info</p>
8 </base-layout>

　　这两者就是多了个name，不过一般都会加上name，项目中不会只有一个插槽。

　　再说说slot-scope，跟官网一样，我个人觉得slot-scope就是作用域插槽。并且他是接收子组件传来的数据。

　　举个栗子：

• 作用域插槽

　　父组件：

<template>
    <div class="father">
    <h3>这里是父组件</h3>
    <slot-scope-child>
        <template slot-scope="user">
            <ul>
                <li v-for="(item, index) in user.data" :key="index">{{item}}</li>
            </ul>
        </template>
    </slot-scope-child>
  </div>
</template>
<script>
import SlotScopeChild from '@/common/SloteScopeChild'
export default {
    components: {
        SlotScopeChild
    }
}
</script>
<style scoped>
</style>

 

　　子组件：

<template>
  <div class="child">
    <h3>这里是子组件</h3>
    <slot :data="data"></slot>
  </div>
</template>
<script>
export default {
    data: function(){
      return {
        data: ['空空如也','悟空','成都','七月上','病变','走马']
      }
    }
}
</script>

　　然后你就会发现，子组件里面的数据会展示出来。这也就是slot-scope。就是带着数据跑。数据在子组件，然后绑到父组件，父组件就可以使用了。这个在elementUI中展示的很好。

　　这大概就是我的理解~新手勿怪！错误请多包涵指正。

 

现在再看，2-21号追加的内容，我承认会给我分销，但是内容真的很好。