Vue scene of slot-scope

Slot slot Vue, divided into three kinds

• Anonymous slot
• Named Slot
• Scope slot

Scope generous concept slots, but only a description of the document

Sometimes you want the component provided with a reusable slots available data from the sub-assembly.

Below are two father and son vue components, first explain the two components do something

• Only the parent component is called sub-assemblies
• Internal sub-component implements a list of todolist

I suggest that from the perspective of the flow of data to understand the scope of use slot,

• 1. The parent component is passed to the array subassembly todos
• 2. The sub-component accepts an array of data through the props, there should be no problem
• 3. The subassembly get the array v-for rendering a list, and by <slot: todo = "todo"> manner, each of the objects within an array todo passed to the parent component
• 4. parent component by slot-scope = "slotProps" manner, todo receiving object can then be used by way of slotProps.todo.xxx

So the flow of data experienced

• Parent component subassembly to pass array todos
• Todos traversal subassembly array, which pass the object to the parent component todo

All Code:

Source parent component, that is, the caller

<template>
  <todo-list :todos="todos">
    <template slot-scope="slotProps">
      <span v-if="slotProps.todo.isComplete">✓</span>
      <span>{{slotProps.todo.text}}</span>
    </template>
  </todo-list>
</template>

<script>
import todoList from './todoList'
export default {
  data () {
    return {
      todos: [
        {
          id: 0,
          text: 'ziwei0',
          isComplete: false
        },
        {
          text: 'ziwei1',
          id: 1,
          isComplete: true
        },
        {
          text: 'ziwei2',
          id: 2,
          isComplete: false
        },
        {
          text: 'ziwei3',
          id: 3,
          isComplete: false
        }
      ]
    }
  },

  components: {
    todoList
  },

}
</script>

Source subassembly, i.e. people package assembly

<template>
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      <slot :todo="todo">
      </slot>
    </li>
  </ul>
</template>

<script>
export default {
  props: {
    todos: {
      type: Array
    }
  }
}
</script>

Not return subcomponents. Because the data is not in the first sub-assembly, final assembly is the father of data back to the parent component ..

Your data is your first parent component, the sub-components under this scenario is generally similar to the element-ui kind of framework components.

IsComplete value change is generally placed in the change in the parent component. element-ui is generally not responsible for changes to your business data, it is only responsible for helping you render, at the right time, such as when clicking todo, the data that is returned to you, you let the caller of this component to modify data.