Vue.js 將變量從一個組件傳遞到另一個組件（jQuery）

Question

我有一個名為ShowComment的組件和一個名為EditComment的組件。

在ShowComment中有一個變量this.CommentRecID 。 我想在組件EditComment中使用這個變量。

問題是console.log(this.CommentRecID); 顯示該變量在EditComment中未定義，但在ShowComment中定義，但我不知道為什么它未定義：

我用它在EditComment中“使用” this.CommentRecID ，但我不知道這是否是正確的方法，因為它與 jquery 相關：

import * as $ from "jquery";
import DatePicker from "vue2-datepicker";

export default {
    props: ["CommentRecID"],
    components: { DatePicker },

這是完整的ShowComment組件： https://pastebin.com/fcy4PCq0

這是完整的Editcomment組件： https://pastebin.com/uik7EwD1

我對 Vue.js 相當陌生。 有人知道如何解決這個問題嗎？

Answer 1

您不應同時使用jQuery和Vue.js 。

您應該嘗試使用道具將數據從父母發送到孩子。

您可以將ShowComment添加為EditComment中的元素，如下所示：

<EditComment CommentRecID="this.CommentRecID" v-if="showEdit" />

並從editItem方法切換showEdit標志

editItem() {
 this.showEdit = true
}

如果您想顯示模式，那么您的EditComment組件可能在樹上，因此您可以使用EventBus或使用Vuex 。

看起來你已經在你的項目中使用Vuex ，所以添加一個存儲CommentRecID的突變並以類似的方式使用它來顯示對話框。

Answer 2

您可以使用 Vue Props 輕松解決此問題，您必須將變量從父組件發送到子組件，請查看此PROPS文檔，其不言自明：

Props Vuejs 文檔如果您在使用 props 時遇到問題，請告訴我