declare module '*.vue' {import Vue from 'vue';export default Vue
}

import { eventBus } from "../main.ts";

An import path cannot end with a '.ts' extension. Consider importing '../main' instead
导入路径不能以“.ts”扩展名结尾。请考虑导入'../main'

import { eventBus } from "../main";

resolve: {extensions: ['.js', '.ts', '.vue', '.json']
}

import { eventBus } from "../main";

<template><xm-son parentName="父组件的name"></xm-son>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import xmSon from 'xmson路径' // 引入子组件@Component({// 挂载子组件components: {xmSon}
})
</script>

<template><p>{{ sonName }}</p>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";@Component
export default class Son extend Vue {@Prop() parentName!: string // 接收父组件的参数sonName: string = this.parentName
}
</script>

<template><xm-son @sonMsg="bindSonMsg"></xm-son>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import xmSon from 'xmson路径' // 引入子组件@Component({// 挂载子组件components: {xmSon}
})export default class Son extend Vue {msg!: stringbindSonMsg(msg: string){// 实现代码逻辑this.msg = msg}}
</script>

<template><p>{{ sonName }}</p><!-- 点击按钮触发 sendToParent 函数 --><button @click="sendToParent">向父组件发出信息</button>
</template>
<script lang="ts">
import { Component, Vue, Prop } from "vue-property-decorator";@Component
export default class Son extend Vue {msg: string = '来自: 子组件的消息'// sonMsg 为父组件引用子组件上的 绑定的事件名称// 也就是说 父组件需要在 子组件标签上 绑定 sonMsg 事件// @sonMsg="待实现的函数"@Emit('sonMsg')sendToParent(){ // 实现 sendToParent函数return this.msg}
}
</script>

// 一定! 必须! 在 Vue 实例之前创建 连接通道
export const eventBus = new Vue()new Vue({render: h => h(App),
}).$mount('#app')

<template><p>Server id: #{{ server.id }} Status: {{ server.status }}</p>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import { eventBus } from '../../main';@Component
export default class ServerDetails extends Vue {server: object[]created() {// 给通道上 绑定一个事件eventBus.$on('serverSelected', (server) => {this.server = server})}
}</script>

<template><li @click="serverSelected">Server #{{ server.id }}</li>
</template>
<script lang="ts">
import { Component, Vue, Prop, Emit } from 'vue-property-decorator';
import { eventBus } from '../../main';@Component
export default class ServerItem extends Vue {name: 'Server'@Prop() server!: object[]// 使用自定义事件接受@Emit('serverSelected')serverSelected(){return this.server}
};
</script>