vue-插槽作用域实用场景

1.插槽
- 1.1 自定义列表渲染
- 1.2 数据表格组件
- 1.3 树形组件
- 1.4 表单验证组件
- 1.5 无限滚动组件

1.插槽

插槽感觉知道有这个东西，但是挺少用过的，每次看到基本都会再去看一遍用法和概念。但是在项目里，自己还是没有用到过。总结下一些可能用到的场景，下次直接这样写了。

1.1 自定义列表渲染

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { reactive } from 'vue';
const myItems = reactive(
  [
  {
    name: 'A',
    age: 18
  },
  {
    name: 'B',
    age: 19
  },
  {
    name: 'C',
    age: 20
  }
]
)
</script>
<template>
  <HelloWorld :items="myItems">
    <template v-slot:default="slotProps">
    <span>{{ slotProps.item.name }}</span>
    <button @click="doSomething(slotProps.item)">操作</button>
  </template>
  </HelloWorld>
</template>

<script setup>
import { defineProps } from 'vue';
 defineProps({
  items: {
    type: Array,
    default: () => []
  }
})
</script>
<template>
  <ul>
    <li v-for="item in items" :key="item.id">
      <slot :item="item"></slot>
    </li>
  </ul>
</template>

效果：
在这里插入图片描述
拓展性很强。

1.2 数据表格组件

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { reactive } from 'vue';
const tableData = reactive(
  [
    {
      name: 'A',
      age: 18
    },
    {
      name: 'B',
      age: 19
    },
    {
      name: 'C',
      age: 20
    }
  ]
)

const columns = reactive(
  [
    {
      label: '姓名',
      key: 'name'
    },
    {
      label: '年龄',
      key: 'age'
    },
    {
      label: '性别',
      key: 'sex'
    },
    { key: 'actions', label: '操作' }
  ]
)
</script>
<template>
  <HelloWorld :columns="columns" :data="tableData">
    <template v-slot:actions="{ row }">
      <button @click="edit(row)">编辑</button>
      <button @click="del(row)">删除</button>
    </template>
  </HelloWorld>
</template>

<template>
  <table>
    <thead>
      <tr>
        <th v-for="column in columns" :key="column.key">
          {{ column.label }}
        </th>
      </tr>
    </thead>
    <tbody>
      <tr v-for="row in data" :key="row.id">
        <td v-for="column in columns" :key="column.key">
          <slot :name="column.key" :row="row">
            {{ row[column.key] }}
          </slot>
        </td>
      </tr>
    </tbody>
  </table>
</template>

<script setup>
import { defineProps } from 'vue';
defineProps({
  columns: Array,
  data: Array,
});
</script>

效果：
在这里插入图片描述

1.3 树形组件

<template>
  <div class="tree-node">
    <slot :node="node" :toggle="toggle" :expandTree="expandTree" name="trangle">
      <span v-if="node.children.length > 0" @click="toggle">{{ expanded ? '▼' : '▶' }}</span>
    </slot>
    <slot :node="node" :toggle="toggle" :expandTree="expandTree">
      <div>
        {{ node.label }}
      </div>
    </slot>
    <div v-if="expanded" class="tree-node-children">
      <HelloWorld v-for="child in node.children" :key="child.id" :node="child">
        <template v-slot="childSlotProps">
          <slot v-bind="childSlotProps"></slot>
        </template>
      </HelloWorld>
    </div>
  </div>
</template>
<script setup>
import HelloWorld from './HelloWorld.vue'
import { defineProps, ref } from 'vue';
const props = defineProps({
  node: {
    type: Object,
    required: true
  }
})
const expanded = ref(false)
const toggle = () => {
  console.log(999)
  expanded.value = !expanded.value
}
const expandTree = () => {
  expanded.value = true
}
</script>
<style>
.tree-node {
  position: relative;
  cursor: pointer;
}

.tree-node-children {
  position: relative;
  padding-left: 20px;
  /* 这个值决定了每一层的缩进量 */
}

.tree-node>span {
  margin-left: 0;
}
</style>

<script setup>
import HelloWorld from './components/HelloWorld.vue'
import { reactive } from 'vue';

const rootNode = reactive({
  id: 1,
  label: '根节点',
  children: [
    {
      id: 2, label: '子节点1', children: [
        { id: 3, label: '子节点1-1', children: [] }
      ]
    },
    { id: 4, label: '子节点2', children: [] }
  ]
})

const addChild = (node, expandTree) => {
  const newId = Date.now()
  expandTree()
  node.children.push({
    id: newId,
    label: `新子节点${newId}`,
    children: []
  })
}
</script>
<template>
  <HelloWorld :node="rootNode">
    <template v-slot="{ node, toggle, expandTree }">
      <span @click="toggle">{{ node.label }}</span>
      <button @click="addChild(node, expandTree)">添加子节点</button>
    </template>
  </HelloWorld>
</template>

效果：
在这里插入图片描述

1.4 表单验证组件

<script setup>
import { ref, watch, defineProps, defineEmits } from 'vue'

const props = defineProps({
  rules: {
    type: Array,
    default: () => []
  },
  modelValue: {
    type: String,
    default: ''
  }
})

const emit = defineEmits(['update:modelValue'])

const value = ref(props.modelValue)
const error = ref('')

const validate = () => {
  for (const rule of props.rules) {
    if (!rule.validate(value.value)) {
      error.value = rule.message
      return false
    }
  }
  error.value = ''
  return true
}

watch(() => props.modelValue, (newValue) => {
  value.value = newValue
})

watch(value, (newValue) => {
  emit('update:modelValue', newValue)
})
</script>

<template>
  <div class="a">
    <slot :value="value" :error="error" :validate="validate"></slot>
    <span v-if="error">{{ error }}</span>
  </div>
</template>
<style lang="scss" scoped>
.a{
  position: relative;
  span{
    color: red;
    position: absolute;
    left: 0;
    bottom: -24px;
    font-size: 14px;
  }
}</style>

//使用
<script setup>
import FormField from './components/HelloWorld.vue'
import { ref } from 'vue';


const email = ref('')

const emailRules = [
  {
    validate: (value) => /.+@.+\..+/.test(value),
    message: '请输入有效的电子邮件地址'
  }
]
</script>
<template>
  <FormField :rules="emailRules" v-model="email">
    <template v-slot="{ value, error, validate }">
      邮箱
      <input :value="value" @input="$event => { email = $event.target.value; validate(); }"
        :class="{ 'is-invalid': error }" />
    </template>
  </FormField>
</template>

<style >
input{
  outline: none;
}
.is-invalid:focus {
  border-color: red;
}
</style>

效果：
在这里插入图片描述

1.5 无限滚动组件


<script setup>
import { ref, onMounted, defineProps } from 'vue'

const props = defineProps({
  fetchItems: {
    type: Function,
    required: true
  }
})

const visibleItems = ref([])
const loading = ref(false)

const handleScroll = async (event) => {
  const { scrollTop, scrollHeight, clientHeight } = event.target
  if (scrollTop + clientHeight >= scrollHeight - 20 && !loading.value) {
    loading.value = true
    const newItems = await props.fetchItems()
    visibleItems.value = [...visibleItems.value, ...newItems]
    loading.value = false
  }
}

onMounted(async () => {
  visibleItems.value = await props.fetchItems()
})
</script>

<template>
  <div @scroll="handleScroll" style="height: 200px; overflow-y: auto;">
    <slot :items="visibleItems"></slot>
    <div v-if="loading">加载中...</div>
  </div>
</template>

//使用
<script setup>
import InfiniteScroll from './components/HelloWorld.vue'
import { ref } from 'vue';



let page = 0
const fetchMoreItems = async () => {
  // 模拟API调用
  await new Promise(resolve => setTimeout(resolve, 1000))
  page++
  return Array.from({ length: 10 }, (_, i) => ({
    id: page * 10 + i,
    content: `Item ${page * 10 + i}`
  }))
}
</script>
<template>
  <InfiniteScroll :fetch-items="fetchMoreItems">
    <template #default="{ items }">
      <div v-for="item in items" :key="item.id">
        {{ item.content }}
      </div>
    </template>
  </InfiniteScroll>
</template>