vue +typescript 的组件传参 （1）

业务需求： 组件传参，子传父

子组件

<script lang="ts">
import { Component,Vue, Emit } from 'vue-property-decorator'; //需要引入Emit


@Component({})
export default class Sider extends Vue {
    // 选择侧边栏，跳转路由

    msg:string = '';
    // bindSend 为父组件引用子组件上 绑定的事件名称
    @Emit('bindSend') send(msg:string) {} 

    protected setActive(e:string) {
        console.log(e);
        // 组件传参
        this.msg = e;
        this.send(this.msg)
        
        // 路由跳转
        this.$router.push({
            name:e,
        })
    }
   
}
</script>

父组件

<template>
     <div class="layout">
        <Sider :style="{position: 'fixed', height: '100vh', left: 0, overflow: 'auto'}" @bindSend="propMsg"></Sider>
        <Layout :style="{marginLeft: '240px'}">
            <Header :style="{background: '#fff', boxShadow: '0 2px 3px 2px rgba(0,0,0,.1)'}"></Header>
            <Content :style="{padding: '0 16px 16px', minHeight: '600px'}">
                <Breadcrumb :style="{margin: '16px 0'}">
                    <BreadcrumbItem >{{msg}}</BreadcrumbItem>
                </Breadcrumb>
                <Card :style="{ minHeight: '600px'}">
                  
                        <router-view></router-view>
                     
                </Card>
            </Content>
        </Layout>
    </div>
</template>
<script lang="ts">
import {Component, Vue} from "vue-property-decorator";

import Header from '@/components/header/header.vue' // 头部
import Sider from '@/components/sider/sider.vue' // 侧边栏

@Component({
    // computed: {
    //   userInfo () {
    //     return this.$store.getters.getUserInfo
    //   }
    // },
    components: {
      Header,
      Sider
    }
  })
export default class Home extends Vue {
    msg:string ='';
    propMsg(msg:string){
        if (msg == 'today') {
            this.msg = '今日门诊'
        }else if (msg == 'history') {
            this.msg = '历史门诊'
        }else if(msg == 'password'){
            this.msg = '系统设置'
        }
        
    }
}
</script>

ts 传参需要注意的重点：

下班明天再写。。。