vue a-sub-menu 添加点击事件报错_Vue+TS 使用的问题(持续更)

[TOC]

引入问题

1. 引入.vue问题带来的问题

在项目目录下添加vue-shims.d.ts文件, 文件内容为

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

1. 在兄弟组件之间传值的时候会引入一个引导者, 这时候就需要引入一个.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";

解决办法: 在webpack.config.js中添加 扩展名

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

引入文件格式如下

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

组件之间通信

父传子

父组件给子组件传递'属性', 子组件使用prop接收

父组件

<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>

子传父

子组件通过事件给父组件发送消息($emit)

父组件

<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!: string

   bindSonMsg(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 中的数据通信都是单向的, 也就是说 数据只会从父流向子或者反过来, 无法在子组件直接通信

父组件给出一些可执行方法(父通过prop下发起 callback 的函数给子)它们是prop提供的, 而在执行这些方法时, 数据就会被传回父组件(子组件使用 callback 函数回传数据), 或者可以通过自定义事件来将数据发回监听这个事件的父组件, 最后父组件就可以将更新过后的数据传递给其他子组件

我们也可以创建一个通道来实现兄弟之间的通信

main.ts

// 一定! 必须! 在 Vue 实例之前创建 连接通道
export const eventBus = new Vue()

new Vue({
  render: h => h(App),
}).$mount('#app')

Son1.vue

<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>

Son2.vue

<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>