Vue.js将变量从一个组件传递到另一个组件（jQuery）

Question

我有一个名为ShowComment的组件和一个名为EditComment的组件。

在ShowComment中有一个变量this.CommentRecID。我想在组件EditComment中使用此变量。

问题是console.log(this.CommentRecID);显示变量在EditComment中未定义，但在ShowComment中定义，但我不知道为什么未定义它：

我用它来在this.CommentRecID中“使用” EditComment，但是我不知道这是否是正确的方法，因为它与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。

您应该尝试使用道具将数据从父级发送到子级。

您可以将EditComment作为元素添加到ShowComment中，如下所示：

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

然后从showEdit方法中切换editItem标志

editItem() {
 this.showEdit = true
}

如果要显示模态，则EditComment组件可能在树上，因此可以使用EventBus或使用Vuex。

似乎您已经在项目中使用了Vuex，所以添加一个存储CommentRecID的变体并以类似的方式使用它来显示对话框。

Answer 2

您可以使用Vue Props轻松解决此问题，您必须将变量从父组件发送到子组件，请查阅此PROPS文档，其自我说明：

Props Vuejs documentation 如果您在使用道具时遇到麻烦，请告诉我