发帖
翼度科技»论坛 › 编程开发 › JavaScript › 查看内容

vue如何通过插槽组件之间数据传递

地龙火

9

主题

9

帖子

27

积分

新手上路

Rank: 1

积分
27
显示全部楼层
vue通过插槽组件之间数据传递


1.父向子传值
  1. //--->Father.vue
  2. <template>
  3.   <div id="father">
  4.     <p>黄色为父组件---data的值为:{{ data }}</p>
  5.     <Son>
  6.         <template #usname>
  7.             <p>data的值为:{{data}}</p>//将父组件的data数据传入子组件的<slot>插槽
  8.         </template>
  9.     </Son>
  10.   </div>
  11. </template>

  13. <script>
  14. import Son from "./Son.vue";
  15. export default {
  16.   data() {
  17.     return {
  18.       data: "Father",
  19.     };
  20.   },
  21.   components: {
  22.     Son,
  23.   },
  24. };
  25. </script>

  27. <style scoped>
  28. #father {
  29.   width: 400px;
  30.   height: 400px;
  31.   background-color: yellow;
  32. }
  33. </style>

  35. //--->son.vue
  36. <template>
  37.   <div id="son">
  38.     <p>蓝色为子组件</p>
  39.     <slot name="usname"></slot>
  40.   </div>
  41. </template>

  43. <script>
  44. export default {};
  45. </script>

  47. <style scoped>
  48. #son {
  49.   width: 200px;
  50.   height: 200px;
  51.   background-color: skyblue;
  52. }
  53. </style>
复制代码
2.子向父传值
  1. //--->Father.vue
  2. <template>
  3.   <div id="father">
  4.     <p>黄色为父组件---data的值为:{{ data }}</p>
  5.     <button @click="upp">1</button>//点击查看传过来的值
  6.     <Son>
  7.       <template #usname="obj">//通过v-slot指令接收son.vue传过来的值
  8.         <p>data的值为:{{ data }}</p>
  9.         <p>son_data的值为{{ obj.son }}</p>
  10.         <button @click="son_data = obj.son">1</button
  11.         >//通过点击按钮将传过来的值保存在Father组件的son_data数据中
  12.       </template>
  13.     </Son>
  14.   </div>
  15. </template>

  17. <script>
  18. import Son from "./Son.vue";
  19. export default {
  20.   data() {
  21.     return {
  22.       data: "Father",
  23.       son_data: "",
  24.     };
  25.   },
  26.   components: {
  27.     Son,
  28.   },
  29.   methods: {
  30.     upp() {
  31.       console.log(this.son_data);
  32.     },
  33.   },
  34. };
  35. </script>

  37. <style scoped>
  38. #father {
  39.   width: 400px;
  40.   height: 400px;
  41.   background-color: yellow;
  42. }
  43. </style>
  44. //--->Son.vue
  45. <template>
  46.   <div id="son">
  47.     <p>蓝色为子组件</p>
  48.     <slot name="usname" :son='son_data'></slot>//添加自定义属性son将son_data数据传入父组件
  49.   </div>
  50. </template>

  52. <script>
  53. export default {
  54.     data(){
  55.         return{
  56.             son_data:'Son'
  57.         }
  58.     }
  59. };
  60. </script>

  62. <style scoped>
  63. #son {
  64.   width: 200px;
  65.   height: 200px;
  66.   background-color: skyblue;
  67. }
  68. </style>
复制代码
vue跨组件动态插槽传递

在看coderwhy老师后台管理系统项目实战视频的时候发现组件封装的思路与动态插槽传递非常有意思，记录一下！

需求及基本信息说明


组件Goods调用组件page-content，组件page-content调用组件hy-table。
为了方便使用，组件page-content封装公共插槽（如果将所有页面的私有的插槽都一股脑放到组件page-content中封装性会变差)，需要在Goods中传递私有插槽内容在hy-table中显示。
这时候就产生了跨组件插槽传递的需求，而由于编译作用域限制的原因，Goods组件中的#image不能直接被hy-table接收，而需要先由page-content接收goods中的数据，再由page-content将数据传递到hy-table中。
而实际开发中不可能在page-content中将插槽名称写死，上面图例page-content中只是简单拿#image进行举例，实际开发中可以在组件page-content中动态插入私有插槽，实现如下。

代码


  • Goods.vue
Goods中使用组件page-content并传入配置文件contentTableConfig，并向page-content中名字为image的插槽提供内容<el-image>
  1. <template>
  2.   <div class="goods">
  3.     <page-content :contentTableConfig="contentTableConfig" pageName="goods">
  4.       <template #image="scope">
  5.         <el-image
  6.           style="width: 60px; height: 60px"
  7.           :src="scope.row.imgUrl"
  8.           :preview-src-list="[scope.row.imgUrl]"
  9.         >
  10.         </el-image>
  11.       </template>
  12.       <template #oldPrice="scope">{{ '¥' + scope.row.oldPrice }}</template>
  13.     </page-content>
  14.   </div>
  15. </template>
复制代码

  • contentTableConfig配置文件数据
其中slotName为status、createAt、updateAt、handler为公共插槽配置
  1. export const contentTableConfig = {
  2.   title: '商品列表',
  3.   propList: [
  4.     { prop: 'name', label: '商品名称', minWidth: '80' },
  5.     { prop: 'oldPrice', label: '原价格', minWidth: '80', slotName: 'oldPrice' },
  6.     { prop: 'newPrice', label: '现价格', minWidth: '80' },
  7.     { prop: 'imgUrl', label: '商品图片', minWidth: '100', slotName: 'image' },
  8.     { prop: 'status', label: '状态', minWidth: '100', slotName: 'status' },
  9.     {
  10.       prop: 'createAt',
  11.       label: '创建时间',
  12.       minWidth: '250',
  13.       slotName: 'createAt'
  14.     },
  15.     {
  16.       prop: 'updateAt',
  17.       label: '更新时间',
  18.       minWidth: '250',
  19.       slotName: 'updateAt'
  20.     },
  21.     { label: '操作', minWidth: '120', slotName: 'handler' }
  22.   ],
  23.   showIndexColumn: true,
  24.   showSelectColumn: true
  25. }
复制代码

  • page-content.vue
定义一个函数otherPropSlots对配置信息进行过滤，去掉公共的插槽名称，剩下就是私有的插槽名称了，返回一个包含私有插槽的数组，在template中对这个数组进行遍历，slot :name="私有插槽名"接收Goods中的内容，“#私有插槽名”的template向子组件hy-table传递内容
  1. <template>
  2.   <div class="page-content">
  3.     <hy-table
  4.       v-bind="contentTableConfig"
  5.     >

  7.       <template #status="scope">
  8.         <el-button
  9.           plain
  10.           size="mini"
  11.           :type="scope.row.enable ? 'success' : 'danger'"
  12.         >
  13.           {{ scope.row.enable ? '启用' : '禁用' }}
  14.         </el-button>
  15.       </template>
  16.       <template #createAt="scope">
  17.         <span>{{ $filters.formatTime(scope.row.createAt) }}</span>
  18.       </template>
  19.       <template #updateAt="scope">
  20.         <span>{{ $filters.formatTime(scope.row.updateAt) }}</span>
  21.       </template>
  22.       <template #handler>
  23.         <div class="handle-btns">
  24.           <el-button v-if="isUpdate" icon="el-icon-edit" size="mini" type="text"
  25.             >编辑</el-button
  26.           >
  27.           <el-button
  28.             v-if="isDelete"
  29.             icon="el-icon-delete"
  30.             size="mini"
  31.             type="text"
  32.             >删除</el-button
  33.           >
  34.         </div>
  35.       </template>

  37.       <!-- 在page-content中动态插入剩余的插槽 -->
  38.       <template
  39.         v-for="item in otherPropSlots"
  40.         :key="item.prop"
  41.         #[item.slotName]="scope"
  42.       >
  43.         <template v-if="item.slotName">
  44.           <slot :name="item.slotName" :row="scope.row"></slot>
  45.         </template>
  46.       </template>

  48.     </hy-table>
  49.   </div>
  50. </template>

  52. <script lang="ts">
  53. import { defineComponent } from 'vue'
  54. import HyTable from '@/base-ui/table'

  56. export default defineComponent({
  57.   components: {
  58.     HyTable
  59.   },
  60.   props: {
  61.     contentTableConfig: {
  62.       type: Object,
  63.       require: true
  64.     },
  65.     pageName: {
  66.       type: String,
  67.       required: true
  68.     }
  69.   },
  70.   setup(props) {
  71.     // 获取其他的动态插槽名称
  72.     const otherPropSlots = props.contentTableConfig?.propList.filter(
  73.       (item: any) => {
  74.         if (item.slotName === 'status') return false
  75.         if (item.slotName === 'createAt') return false
  76.         if (item.slotName === 'updateAt') return false
  77.         if (item.slotName === 'handler') return false
  78.         return true
  79.       }
  80.     )
  81.     return {
  82.       otherPropSlots
  83.     }
  84.   }
  85. })
  86. </script>
复制代码
想说的话：
动态传递插槽和封装的思路绝了，需要花好多功夫和时间去消化~

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

来源:https://www.jb51.net/javascript/322388pkf.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！

本帖子中包含更多资源

您需要 登录 才可以下载或查看，没有账号？立即注册

x

上一篇: 一文了解Vue 3 的 generate 是这样生成 render&n

下一篇: JavaScript事件监听之键盘事件详细介绍

发表于 2024-6-11 10:02:15

举报 回复 使用道具

返回列表 发新帖

Archiver|手机版|小黑屋|翼度科技

Copyright © 2001-2020, Tencent Cloud.　Powered by Discuz! X3.4