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 документацией, которая не требует пояснений:

Реквизиты Vuejs Документация Пожалуйста, дайте мне знать, если у вас возникнут проблемы с использованием реквизита