types(Sidebar): use tsx (#8121)

src/sidebar/README.md

@@ -90,9 +90,9 @@ export default {
 
 ### Sidebar Events
 
-| Event  | Description                      | Arguments                    |
-| ------ | -------------------------------- | ---------------------------- |
-| change | Emitted when chosen item changed | index: index of current item |
+| Event  | Description                      | Arguments       |
+| ------ | -------------------------------- | --------------- |
+| change | Emitted when chosen item changed | _index: number_ |
 
 ### SidebarItem Props
 
@@ -108,9 +108,9 @@ export default {
 
 ### SidebarItem Events
 
-| Event | Description                     | Arguments                    |
-| ----- | ------------------------------- | ---------------------------- |
-| click | Emitted when an item is clicked | index: index of current item |
+| Event | Description                     | Arguments       |
+| ----- | ------------------------------- | --------------- |
+| click | Emitted when an item is clicked | _index: number_ |
 
 ### SidebarItem Slots
 

src/sidebar/README.zh-CN.md

@@ -98,9 +98,9 @@ export default {
 
 ### Sidebar Events
 
-| 事件名 | 说明             | 回调参数                |
-| ------ | ---------------- | ----------------------- |
-| change | 切换导航项时触发 | index: 当前导航项的索引 |
+| 事件名 | 说明             | 回调参数        |
+| ------ | ---------------- | --------------- |
+| change | 切换导航项时触发 | _index: number_ |
 
 ### SidebarItem Props
 
@@ -116,9 +116,9 @@ export default {
 
 ### SidebarItem Events
 
-| 事件名 | 说明       | 回调参数                |
-| ------ | ---------- | ----------------------- |
-| click  | 点击时触发 | index: 当前导航项的索引 |
+| 事件名 | 说明       | 回调参数        |
+| ------ | ---------- | --------------- |
+| click  | 点击时触发 | _index: number_ |
 
 ### SidebarItem Slots
 

src/sidebar/index.tsx

@@ -1,4 +1,3 @@
-import { watch } from 'vue';
 import { createNamespace } from '../utils';
 import { useChildren } from '@vant/use';
 
@@ -6,6 +5,11 @@ const [createComponent, bem] = createNamespace('sidebar');
 
 export const SIDEBAR_KEY = 'vanSidebar';
 
+export type SidebarProvide = {
+  getActive: () => number;
+  setActive: (value: number) => void;
+};
+
 export default createComponent({
   props: {
     modelValue: {
@@ -19,19 +23,17 @@ export default createComponent({
   setup(props, { emit, slots }) {
     const { linkChildren } = useChildren(SIDEBAR_KEY);
 
-    const active = () => +props.modelValue;
+    const getActive = () => +props.modelValue;
 
-    const setActive = (value) => {
-      if (value !== active()) {
+    const setActive = (value: number) => {
+      if (value !== getActive()) {
+        emit('update:modelValue', value);
         emit('change', value);
       }
     };
 
-    watch(active, setActive);
-
     linkChildren({
-      emit,
-      active,
+      getActive,
       setActive,
     });