业务需求: 组件传参,子传父
子组件
<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 传参需要注意的重点:
下班明天再写。。。