Слот области видимости Vue, вы действительно понимаете?

Vue.js

предисловие

Я искал много объяснений о слотах области действия в Интернете, но я не думаю, что они очень специфичны. Я думаю, что мне нужно иметь глубокое понимание компонентизации, чтобы коснуться этой проблемы. Я также делюсь своим собственным пониманием слота-A. мало понимания масштаба.

  • Разобраться с документом слота может каждый, это не что иное, как выкапывание дырки в подкомпоненте, а что туда класть, определяет родительский компонент.
// 子组件
<template>
  <slot>来啊，我这里挖了个坑</slot>
</template>

// 父组件
<template>
  <child>
   <!-- 传入子组件的自定义内容，会填入到子组件的slot插槽中 -->
    <span>我在这放个span，乐意的话，放个组件都行</span>
  </child>
</template>
  1. Передать обычный текст в слот

slot传入普通文本

  1. Передайте компонент обработки изображений в слот

slot传入普通文本

  • Именованные слоты тоже очень просты.Например, есть несколько слотов.Как родительский компонент, я обязательно хочу выделить несколько слотов в дочернем компоненте, поэтому я использую атрибут name тега слота для его идентификации, а родительский компонент должен решить, где какой контент помещается в какой слот, необходимо присвоить значение имени атрибуту слота и передать его в соответствующий слот. Если у слота нет атрибута имени, это анонимный слот, и содержимое атрибута слота, не указанное в родительском компоненте, будет переброшено в анонимный слот.
// 子组件
<template>
    <section>
        <slot name="article-title">这里放标题</slot>
        <slot>这里放作者</slot>
        <slot name="article-content">这里放文章内容</slot>
    </section>
</template>

// 父组件
<template>
    <section>
        <slot-child>
            <h1 slot="article-title">vue作用域插槽，你真的懂了吗？</h1>
            <p slot="article-content">好像有点懂了</p>
            <div>王五</div>
        </slot-child>
    </section>
</template>
  • Сложнее всего понять слоты с ограниченной областью действия. Друзья, читавшие документацию, могут слегка закружиться, наверное, говоря, что в слоте области действия родительский компонент может получить данные дочернего компонента. Подкомпоненты могут привязывать значения свойств к тегам слотов, например:
<slot :nickName="'Tusi'"></slot>

Родительский компонент получает значение nickName через объект, ограниченный slot-scope.

<template>
    <section>
        <slot-child>
            <template slot-scope="scope">
                <div>{{scope.nickName}}</div>
            </template>
        </slot-child>
    </section>
</template>

У всех здесь должны быть вопросы. Какая от этого польза? Могу ли я передать данные родительскому компоненту с помощью $emit в дочернем компоненте?

Небольшое понимание слотов с ограниченной областью действия

Я думаю, что вариант использования слотов с ограниченной областью действия следует рассматривать с точки зрения потока данных между компонентами.

Предположим, что первый сценарий требует, чтобы вы написали компонент карточки продукта и отображали несколько карточек в цикле и запрашивали переход на страницу сведений о продукте в ответ на событие щелчка по изображению или другому содержимому на каждой карточке. Что бы вы сделали? ?Написать?

淘宝商品列表

Я буду использовать следующий метод обработки: сначала напишу карточку товара как компонент Commodity.vue и использую v-for в CommodityList.vue для обработки отображения списка карточек товара.

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

Компонент Commodity передает событие clickCommodity родительскому компоненту через $emit и содержит данные о товаре.Родительский компонент может получить данные в методе onCommodityClick и выполнить бизнес-обработку, тем самым завершив базовую передачу данных от дочернего компонента к родительскому.

Что, если бы это было абстрагировано немного дальше? Например, у меня есть несколько столбцов операций. Например, на главной странице Taobao есть два столбца, такие как «хорошие товары» и «любимые покупки». В каждом столбце должен быть список карточек товаров, затем список карточек товаров CommodityList .vue возьмет на себя часть компонентов. И этот компонент vue, который содержит несколько столбцов операций, я предполагаю, что он называется ColumnList.vue, в котором компонент CommodityList вызывается через v-for.

淘宝运营栏目列表

Уведомление: Дело идет, надеюсь поставить дело по щелчку карточки товара в ColumnList.vue. Вы представляете, что делать? Один из способов заключается в том, что при нажатии кнопки продукта компонент Commodity $emit уведомляет CommodityList.vue, а затем CommodityList генерирует событие с помощью $emit, после чего ColumnList.vue может обработать событие щелчка. В этом нет проблем, но кажется, что подкомпонент очень нечист и имеет какое-то отношение к бизнесу.

Так как же элегантно решить эту проблему? Вот где слоты с прицелом действительно пригодятся.

Бизнес по щелчку карты товара onCommodityClick, который должен обрабатываться CommodityList, повышается до обработки ColumnList через слот области.

<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>

Компонент CommodityList должен быть преобразован таким образом Слот получает компонент товарной карты от родительского компонента Это не затрагивает бизнес компонента товара, а только фокусируется на других бизнесах и макетах. В итоге реализуется разделение компонентов и бизнеса, что и составляет суть компонентизации. Не знаю, помогло ли вам?

<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>

Вот такого эффекта я добился.Не обращайте внимания на стиль.Я понял принцип.Насколько сложно сделать красивую открытку?淘宝运营栏目列表 淘宝运营栏目列表

Подводя итог, слоты области действия подходят для сценариев, содержащих как минимум три или более уровня компонентов, что является отличным решением для компонентизации!

Категории