Vue. js Передача переменной из родительского в дочерний компонент

Question

Родительский компонент: ShowComment

Дочерний компонент: EditComment

Я пытаюсь передать значение this.CommentRecID дочернему компоненту.

Я написал это в шаблоне ShowComment:

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

и

this.showEdit = true;

, но значение this.CommentRecID отображается как неопределенное в дочернем компоненте:

Я думал, что записи props: ["CommentRecID"], в дочернем компоненте уже было бы достаточно для передачи данных, но этого не было (потому что это связано с jQuery Я думаю).

Что плохого в том, как я пытаюсь передать значения?

Вот родительский компонент .

Вот дочерний компонент .

Answer 1

Вам необходимо использовать VueJS переплет

<EditComment :comment-rec-id="CommentRecID" v-if="showEdit"></EditComment>

props: ['commentRecId']

Answer 2

Вам не нужно использовать this в VueJS директивах. Кроме того, вместо использования атрибута stati c необходимо использовать v-bind:

<EditComment v-bind:comment-rec-id="commentRecId" v-if="showEdit"></EditComment>

Кроме того, существует проблема с регистром: для VueJS, в шаблоне следует быть в шашлыке, в то время как в компоненте JS logi c вы должны использовать реквизиты camelCase . Не забудьте обновить декларацию prop вашего дочернего компонента, чтобы он мог правильно прочитать новый объект:

 props: ["commentRecId"]