[TOC]

引入問題

引入.vue問題帶來的問題

在項目目錄下添加vue-shims.d.ts文件, 文件內容為

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

在兄弟組件之間傳值的時候會引入一個引導者, 這時候就需要引入一個.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!: 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 中的數據通信都是單向的, 也就是說 數據只會從父流向子或者反過來, 無法在子組件直接通信

父組件給出一些可執行方法(父通過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>

總結

以上是生活随笔為你收集整理的vue a-sub-menu 添加点击事件报错_Vue+TS 使用的问题(持续更)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。