那些抓狂的vue+tsx经典案例

1.父子组件间传值

子组件header：用this.$emit方法来给父组件传值

import { Component, Prop } from "vue-property-decorator"
import { VC } from "@/VC-vue"


interface Props {
    menuItemId?: string[]
}
@Component({})
export default class Header extends VC<Props> {
 
    @Prop() menuItemId!: string[]


    changeMenuItem({ item, key, keyPath }) {
        console.log("切换tab", item, key, typeof key, keyPath);
        this.$emit('update:menuItemId', keyPath);
    }

    renderDesktop() {
        return (
            <a-layout-header>
            <div>
                    <a-menu
                        theme="dark"
                        mode="horizontal"
                        selectedKeys={this.menuItemId}
                        style="lineHeight: 64px"
                        onClick={this.changeMenuItem}

                    >
                        <a-menu-item key="1">
                            菜单1
                        </a-menu-item>
                        <a-menu-item key="2">
                             菜单2
                        </a-menu-item>
                        <a-menu-item key="3">
                             菜单3
                        </a-menu-item>
                        <a-menu-item key="4">
                             菜单4
                        </a-menu-item>
                    </a-menu>
                </div>
            </a-layout-header>
        )
    }

    render() {
        return (
            <div style="position:relative">
                     this.renderDesktop()
            </div>
        )
    }
}

父组件 在header 组件中绑定

import "./style.less";
import { Component, Vue, Provide } from "vue-property-decorator";
import Header from "./header";

@Component({})
export default class Layout extends Vue {
    menuId: string[] = ['4'];
    menuIdChange: string = '4';

    handle(e) {
        this.menuIdChange = e[0];
        this.menuId = [e[0]];
    }
    
    render() {
        console.log('this.menuIdChange', this.menuIdChange)
        return (
            <a-layout class={styles.full_layout}>
                <Header
                    menuItemId={this.menuId}
                    {...{ on: { 'update:menuItemId': this.handle } }}
                />
            </a-layout>
        );
    }
}

2.vuex的传值 取值定义

store下面的index.ts

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({})

store 下面的menu.ts,创建一个menuStore的命名空间

import {
    Module,
    VuexModule,
    Mutation,
    Action,
    getModule,
} from "vuex-module-decorators"

import store from "./index"


// dynamic: true: 动态创建动态模块,即new Vuex.Store({})里面不用注册的.空着就行,
@Module({ dynamic: true, store, name: "menuStore" })
class Menu extends VuexModule {
    menuItem: string = "4"

    @Mutation
    saveMenuInfo(state: string) {
        this.menuItem = state
    }

    @Action
    async getMenuInfo(payload: string) {
    
    this.context.commit('saveMenuInfo', state); // commit调用
        this.saveMenuInfo(payload)
    }
}

export const MenuStore = getModule(Menu)

在页面组件中赋值：

        MenuStore.getMenuInfo(key);

在页面组件中取值：

        MenuStore.menuItem

3.vue+rooter