Слоты с областью действия Vue: экземпляр области действия слота

внешний интерфейс GitHub Vue.js
Слоты с областью действия Vue: экземпляр области действия слота

Вчера я читал документ на официальном сайте vue.Я не очень хорошо разбирался в slot-scope.Сегодня я сделал небольшой пример для облегчения понимания.

Давайте сначала поговорим о наших гипотетических общих сценариях приложений.Мы разработали компонент списка дел, многие модули используются, и теперь он должен быть вНе влияет на работу и отображение модулей, прошедших проверкуслучае, дайтеДобавлен эффект галочки для выполненных задач.

То есть компонент списка дел должен удовлетворять следующим требованиям.

  1. Предыдущий формат данных и справочный интерфейс остаются неизменными и отображаются нормально.
  2. Новые функциональные модули добавляют галочки

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

компонент todo-list.vue

<template>
  <ul>
    <li v-for="item in todoList" v-bind:key="item.id">
      <slot v-bind:itemValue = "item" >
         {{ item.test }} 
      </slot>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'todoList',
  props: {
    todos: Array
  },
  data(){
    return {
      todoList:this.todos
    }
  }
}
</script>

код компонента

<template>
 <ul>
   <li v-for="item in todoList" v-bind:key="item.id">
     <slot>
        {{ item.test }} 
     </slot>
   </li>
 </ul>
</template>

<script>
export default {
 name: 'todoList',
 props: {
   todos: Array
 },
 data(){
   return {
     todoList:this.todos
   }
 }
}
</script>

код родительского компонента

<template>
 <div id="app">
  <h2>之前组件调用</h2>
  <todo-list v-bind:todos="todosBefore" ></todo-list>
 </div>
</template>

<script>
import todoList from './components/todo-list.vue'

export default {
 name: 'app',
 data:function(){
   return {
     todosBefore:[
       {
         test:'询问时间',
         id:12312313123
       },
       {
         test:'代办1',
         id:123123123423423
       },
       {
         test:'爱你地方年底见覅',
         id:12312313123234234
       },
       {
         test:'时间2',
         id:1231231312323333
       },
       {
         test:'师生情是行情',
         id:12313333333
       }
     ]
   }
 },
 components: {
   todoList
 }
}
</script>

Отображение результатов

шаг

Для того, чтобы добиться эффекта добавления галочки к пунктам списка дел, нам нужно настроить структуру данных в данных, добавитьtodosAfterмассив и добавить каждый элементisCompleteлоготип.

todosAfter:[
        {
          test:'询问时间',
          isComplete:true,
          id:12312313123
        },
        {
          test:'代办1',
          isComplete:false,
          id:123123123423423
        },
        {
          test:'爱你地方年底见覅',
          isComplete:false,
          id:12312313123234234
        },
        {
          test:'时间2',
          isComplete:true,
          id:1231231312323333
        },
        {
          test:'师生情是行情',
          isComplete:true,
          id:12313333333
        }
      ],

Понимание слотов и передачи данных

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

  1. Где написан солт-код слота? Конечно внутри родительского компонента,Solt — это интерфейс, предоставляемый дочерним компонентом родительскому компоненту, который необходимо передать от родительского компонента к дочернему компоненту..
  2. Область слота, слот области буквально понимается и действует только на слот.

Этот сквозной шаг

  1. Родительский компонент отправляет данные дочернему компоненту, родитель => дочерний
  2. Дочерний компонент помещает данные в слот и предоставляет их интерфейсу родительского компонента.
  3. Родительский компонент вызывает интерфейс слота и данные дочернего компонента

Ранее мы добавили данные в данныеisCompleteсвойства, теперь к подкомпонентамitemПередайте его в слот и выставьте интерфейс данных родительскому компоненту.itemValue, сфокусироваться наv-bind:itemValue = "item"это предложение.

<template>
  <ul>
    <li v-for="item in todoList" v-bind:key="item.id">
      <slot v-bind:itemValue = "item" >
         {{ item.test }} 
      </slot>
    </li>
  </ul>
</template>

Далее идет слот и родительский компонент, вызывающий дочерний компонент.itemValueданные.

<h2>之前组件调用</h2>
<todo-list v-bind:todos="todosAfter">
    <template slot-scope="slotProps">
        <!-- 打印itemvalue数据-->
        <div style="background:red; border-bottom:2px solid blue;">
            {{slotProps.itemvalue}}
        </div>
        <!-- 根据判断条件展示对号元素 -->
        <span v-if="slotProps.itemValue.isComplete">✓</span>
        <!-- 显示代办事项名称 -->
        {{ slotProps.itemValue.test }}
    </template>

</todo-list>

Эффект следующий

Прикрепленный пример кода:github link

Суммировать

На самом деле слот области действия очень похож на функцию параметра, компонент эквивалентен cb, а входной параметр cb эквивалентен параметру, полученному slotProps, но имя и форма изменились.

<!-- 函数 -->
function foo(str,cb){
    var msg = str + '你好';
    cb(msg);
}
<!-- 调用 -->
foo('愚坤',function(msg){
    alert(msg)
})

foo('愚坤',function(msg){
    console.log(msg)
})

Если у вас есть какие-либо вопросы, пожалуйста, поправьте меня.

Категории