vue3 三层插槽传递

最新推荐文章于 2024-12-27 11:23:57 发布

原创最新推荐文章于 2024-12-27 11:23:57 发布 · 2.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #elementui

本文探讨了如何在Vue应用中通过`props`和`emit`实现父子组件之间的数据交互，从搜索列表组件的实例展示到表单组件的细粒度控制，重点讲解了父子组件间的有效通信策略。

效果:

爷爷:

<template>
  <ElPlusCrud :searchList="searchList">
    <template #input2> xxx </template>
  </ElPlusCrud>
</template>

<script setup>
  import ElPlusCrud from '../../components/el-plus-crud/index.vue'
  import { reactive } from 'vue'

  const searchList = reactive([{ name: 'input1' }, { name: 'input2' }, { name: 'input3' }])
</script>

爸爸

<SearchCrud :searchList="props.searchList" >
  <template v-for="(item, index) in searchList" v-slot:[item.name] >
    <slot :name="item.name">
    </slot>
  </template>
</SearchCrud>

孙子

<el-form size="small" label-position="left">
  <el-row :gutter="20">
    <el-col v-for="(item, index) in searchList" :xs="24" :sm="12" :md="8" :lg="6">
      <el-form-item :label="item.name">
        <slot :name="item.name">
          <el-input></el-input>
        </slot>
      </el-form-item>
    </el-col>
  </el-row>
</el-form>