Basic usage and summary of v-solt in vue

Basic usage and summary of v-solt in vue

Named slot

<div class="container"> 
  <header>
    <!-- 我们希望把页头放这里 -->
  </header>
  <main>
    <!-- 我们希望把主要内容放这里 -->
  </main>
  <footer>
    <!-- 我们希望把页脚放这里 -->
  </footer>
</div>

For such cases, the <slot>element has a special attribute: name

<div class="container">
  <header>
    <slot name="header"></slot>
  </header>
  <main>
    <slot></slot>
  </main>
  <footer>
    <slot name="footer"></slot>
  </footer>
</div>

At the time named slots provide content, we can one <template>use the element of v-slot instructions, and provide their name as a parameter of v-slot of: (Note that <template v-slot:header>v-slot commands must be placed <template>inside)

<base-layout>
  <template v-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 v-slot:footer>
    <p>Here's some contact info</p>
  </template>
</base-layout>

Then it will be rendered

<div class="container">
  <header>
    <h1>Here might be a page title</h1>
  </header>
  <main>
    <p>A paragraph for the main content.</p>
    <p>And another one.</p>
  </main>
  <footer>
    <p>Here's some contact info</p>
  </footer>
</div>

Scope slot

The understanding of scope slots comes from this link

I think we need to think about the application scenarios of scope slots from the data flow between components.
Assuming that in the first scenario, you need to write a product card component and display multiple cards in a loop, and you are required to jump to the product detail page in response to the click event of the image or other content on each card. What will you do? write?

I will use the following processing method, first write the commodity card as a component Commodity.vue, and use a v-for in CommodityList.vue to process the display of the commodity card list.

<commodity v-for="(item,index) in commodities" @clickCommodity="onCommodityClick"></commodity>

The Commodity component passes the clickCommodity event like the parent component through $emit and carries the product data. The parent component can get the data in the onCommodityClick method for business processing, thus completing a basic data transfer from child to parent

What if we were to abstract it a bit? For example, I have multiple operating columns, such as "good products" and "love shopping" on the Taobao homepage. Each column needs a product card list, then the commodity card list CommodityList.vue will be drawn Component too. And this vue component that contains multiple operation columns, I assume it is called ColumnList.vue, in which the CommodityList component is called through v-for.

Note : The business is here, I want to process the business of clicking on the product card in ColumnList.vue. What do you guys imagine? One way to do this is when the commodity button is clicked, Commodity component $EmITthroughknownCOmmODITYLIST.VUE,andCOmmODITYLISTcontactwiththethingsmemberwith$ emit throw up, then ColumnList.vue can handle this click event. There is no problem at all, but it seems that the sub-components are very impure and have nothing to do with the business.

So how to solve this problem gracefully? At this time, the scope slot really comes in handy.

The commodity card click service onCommodityClick, which should be handled by CommodityList, is promoted to ColumnList through the scope slot.

<el-row :gutter="20">
        <el-col :span="12" v-for="(column, index) in columnList" :key="index">
            <el-card class="box-card card-column">
                <div slot="header" class="clearfix">
                    <span>{
   
   {column.columnName}}</span>
                </div>
                <commodity-list :commodities="column.commodityList">
                    <template slot-scope="scope">
                    <!-- 这里只需要给Commodity组件传入数据，响应Commodity组件的clickCommodity事件即可。
                        事件不必携带参数，完全符合父到子的数据流向，而不会发生子组件又给父组件反向发数据的情况 -->
                        <commodity :modityData="scope.row" @clickCommodity="onCommodityClick(scope.row)"></commodity>
                    </template>
                </commodity-list>
            </el-card>
        </el-col>
</el-row>

The CommodityList component should be transformed into this. Slot receives the commodity card component from the parent component. It does not involve the business of the commodity component, and only focuses on other businesses and layouts.

<el-row :gutter="20">
        <el-col :span="8" v-for="(item, index) in commodities" :key="index" style="margin-top:20px;">
            <slot :row="item"></slot>
        </el-col>
</el-row>

To sum up, scoped slots are suitable for scenarios that contain at least three or more component levels, which is an excellent componentization solution!