fix(tab): 选项卡 tab-item 组件套用 for 循环导致 props 无法获取

docs/docs/zh-CN/guide/changelog.md

@@ -7,6 +7,7 @@
 <lay-timeline-item title="0.1.6">
 [修复] menu 菜单 selectedKey 选中项 openKeys 打开项 props 双绑。<br>
 [修复] tab 选项卡 v-model 激活项 双绑。<br>
+[修复] tab 选项卡 tab-item 组件套用 for 循环无法获取 props 属性。<br>
 [新增] page 分页 prev 插槽。<br>
 [新增] page 分页 next 插槽。<br>
 </lay-timeline-item>

docs/docs/zh-CN/guide/sandbox.md

@@ -4,6 +4,7 @@
 ::: demo
 
 <template>
+{{tabs}}
 <lay-menu v-model:selectedKey="selectedKey" v-model:openKeys="openKeys" :tree="isTree">
     <lay-menu-item title="工作空间" id="0">
         <lay-menu-child-item id="1" title="控制台">
@@ -21,8 +22,9 @@
     </lay-menu-item>
 </lay-menu>
   <lay-tab type="brief" v-model="selectedKey">
-    <lay-tab-item title="选项一" id="1"><div style="padding:20px">选项一</div></lay-tab-item>
+    <lay-tab-item v-for="tab in tabs" :key="tab" :title="tab.title" :id="tab.id">
-    <lay-tab-item title="选项二" id="2"><div style="padding:20px">选项二</div></lay-tab-item>
+      {{ tab }}
+    </lay-tab-item>
   </lay-tab>
 </template>
 
@@ -34,18 +36,28 @@ export default {
     const router = useRouter();
     const route = useRoute();
 
+    const tabs  = ref([{
+      id:'1',title:'选项一'
+    },{
+      id:'2',title:'选项二'
+    }])
+
     const isTree = ref(true);
+    
     const selectedKey = ref("1");
+    
     const openKeys = ref(["0"]);
+
     const change = function (id) {
-        selectedKey.value = id
+      selectedKey.value = id
-    };
+    }
 
     return {
       isTree,
       selectedKey,
       openKeys,
       change,
+      tabs
     };
   },
 };

docs/src/layouts/Layout.vue

@@ -31,7 +31,7 @@
             </a>
           </li>
           <li class="layui-nav-item">
-            <a href="javascript:void(0)"> 0.1.4 </a>
+            <a href="javascript:void(0)"> 0.1.6 </a>
           </li>
         </ul>
       </lay-header>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@layui/layui-vue",
-  "version": "0.1.4",
+  "version": "0.1.6",
   "description": "a component library for Vue 3 base on layui-vue",
   "main": "lib/layui-vue.umd.js",
   "module": "lib/layui-vue.es.js",

src/module/menu/index.vue

@@ -44,18 +44,6 @@ const selectedKey = computed({
   },
 })
 
-watch(selectedKey, function (val) {
-  emit('update:selectedKey', val)
-})
-
-watch(
-  openKeys,
-  function (val) {
-    emit('update:openKeys', val)
-  },
-  { deep: true }
-)
-
 provide('isTree', isTree)
 provide('selectedKey', selectedKey)
 provide('openKeys', openKeys)

src/module/tab/index.vue

@@ -28,16 +28,18 @@ export default {
 </script>
 
 <script setup lang="ts">
-import tabItem from "../tabItem/index.vue"
+import tabItem from '../tabItem/index.vue'
 import {
+  defineProps,
   Component,
   computed,
-  defineProps,
+  useSlots,
   provide,
+  VNode,
   Ref,
   ref,
-  useSlots,
+  onUpdated,
-  VNode
+  onMounted,
 } from 'vue'
 
 const slot = useSlots()
@@ -55,7 +57,15 @@ const setItemInstanceBySlot = function (nodeList: VNode[]) {
   })
 }
 
-setItemInstanceBySlot(slots as any[])
+onUpdated(() => {
+  childrens.value = []
+  setItemInstanceBySlot((slot.default && slot.default()) as VNode[])
+})
+
+onMounted(() => {
+  childrens.value = []
+  setItemInstanceBySlot((slot.default && slot.default()) as VNode[])
+})
 
 const props = defineProps<{
   type?: string