Vue slot的使用范例

// MyComponent.vue这个是主文件
<template>
  <div>
    <h2>匿名插槽</h2>
    <TodoList>
      <template v-slot:default>
        任意内容
        <p>我是匿名插槽内容</p>
      </template>
    </TodoList>
    <h2>具名插槽</h2>
    <TodoList>
      <template v-slot:chenlili>
        <p>陈丽丽</p>
        <p>我是陈丽丽这个插槽要显示的内容</p>
      </template>
    </TodoList>
    <h2>作用域插槽</h2>
    <TodoList>
      <template v-slot:fn="slotProps">
        {{slotProps.user.firstName}}
        {{slotProps.test.map(item => item)}}
      </template>
    </TodoList>
    <h2>给作用域插槽进行解构赋值</h2>
    <TodoList>
      <template v-slot:fn="{user, test}">
        {{user.firstName}}
        {{test.map(item => item)}}
      </template>
    </TodoList>
    <h1>另外一个地方复用</h1>
    <TodoList>
      <template v-slot:default>5241354354</template>
      <template v-slot:chenlili />
    </TodoList>

  </div>
</template>

<script>
  import TodoList from './TodoList'
export default {
  name: 'MyComponent',
  components: {
    TodoList
  }
}
</script>

<style scoped>

</style>

再来看一下TodoList这个插件

// TodoList.vue被MyComponent.vue所引用的组件
<template>
  <div>
    <h4>TodoList</h4>
    <p>
      <slot>我是默认值，插槽不具名的时候，默认显示的内容</slot>
    </p>
    <slot name="chenlili">当传过来的是陈丽丽的时候，默认要显示的内容</slot>
    <slot name="fn" :user="user" :test="test">
      {{user.lastName}}
    </slot>
  </div>
</template>

<script>
export default {
  name: "TodoList",
  data(){
    return {
      user: {
        lastName: 'lili',
        firstName: 'chen'
      },
      test: [ 1,2,3,4 ]
    }
  }
}
</script>

<style scoped>

</style>