57Vue_slot插槽

Vue插槽slot

1.作用: 让父组件可以向子组件指定位置插入html结构，也是一种组件间通信的方式，适用于父组件==>子组件。

2.分类: 默认插槽、具名插槽、作用域插槽

3.使用方式:

• 1.默认插槽:

  父组件中:
      <Category>
          <div>html结构1</div>
      </Category>
  子组件中:
      <template>
          <div>
              <!--定义插槽-->
              <slot>插槽默认内容...</slot>
          </div>
      </template>
  

• 2.具名插槽:

  父组件中:
      <Category>
          <template slot="center">
              <div>html结构1</div>
          </template>
          <template v-slot:footer>
              <div>html结构2</div>
          </template>
      </Category>
  子组件中:
  <template>
      <div>
          <!--定义插槽-->
          <slot name="center">插槽默认内容...</slot>
          <slot name="footr">插槽默认内容...</slot>
      </div>
  </template>
  
  

• 3.作用域插槽

  1.理解: 数据在组件的自身, 但根据数据生成的结构需要组件的使用者来决定。

  ​ (games数据在Category组件中，但使用数据所遍历出来的结构由App组件决定)

  2.具体编码:

  父组件中:
      <template>
          <div class="container">
              <Category title="游戏">
                  <template scope="Data">  <!-- 用scope拿数据 -->
                      <ul>
                          <li v-for="(item, index) in Data.games" :key="index">{{item}}</li>
                      </ul>
                  </template>
              </Category>
          </div>
  	</template>
  
      <template>
          <div class="container">
              <Category title="游戏">
                  <template slot-scope="Data"> 
                      <ul>
                          <li v-for="(item, index) in Data.games" :key="index">{{item}}</li>
                      </ul>
                  </template>
              </Category>
          </div>
      </template>
  
  子组件中:
  <template>
      <div class="Category">
          <slot :games="games">xxx</slot>
      </div>
  </template>
  
  
  <script>
  export default {
      name: 'Category',
      props:['title'], //数据在子组件自身
      data() {
          return {games:['红色警戒','穿越火线','劲舞团','超级玛丽']}
      },
  }
  </script>
  
  

---

默认插槽：就是先挖个坑，(自带土)再填 【父组件自带的数据】
具名插槽：就是挖多个坑，给每个坑命一个名，(自带土)再填 【父组件自带的数据】
作用域插槽：就是挖坑，(原有土)再填 【子组件原有的数据】

• slot 绑定数据
• 父组 scope获取