Vue Component interact with page where its in

Question

I'm using 2 components in my page, one for a comment and inside the comment component is the comment reply component, I did it this way to add some functionality that I needed but now I don't know how to get the buttons in the components to do the stuff they did before I turned them into components. For example the edit function opens a dialog that is in the page where the comment component is located but now it doesn't do anything, same with the reply functionality.

How can I get this to work, or is there a way to keep those methods in the main page and not have to put them in the components? I've never made my own component before so I'm not sure how to do this.

This is the Comment component code, the editComment and openReply are methods from the main page

<template>
    <div class="comment">
        <el-card shadow="never" v-if="comment.parent_id === null">
            <el-row v-if="comment.deleted === 0">
                <el-row style="margin-bottom: 15px">
                    <el-col :span="20" v-if="forum.anonymous === 0">
                        <p class="comment-user-name">{{comment.user.name}} dice: </p>
                    </el-col>
                    <el-col :span="20" v-if="forum.anonymous === 1">
                        <p class="comment-user-name">Anónimo dice: </p>
                    </el-col>

                    <el-col :span="4">
                        <div style="text-align: end"
                             v-if="comment.user_id === $page.auth.user.auth.user.id">
                            <div v-if="canEdit" class="btn-link-edit action-button"
                                 @click="editComment(comment)">
                                <i class="fas fa-pencil-alt"></i>
                            </div>
                            <div class="btn-link-delete action-button"
                                 @click="remove(comment.id)">
                                <i class="fas fa-trash"></i>
                            </div>
                            <div class="btn-link-preview action-button"
                                 @click="openReply(comment)">
                                <i class="fas fa-reply"></i>
                            </div>
                        </div>
                        <div style="text-align: end"
                             v-if="comment.user_id !== $page.auth.user.auth.user.id">
                            <div class="btn-link-preview action-button"
                                 @click="openReply(comment)">
                                <i class="fas fa-reply"></i>
                            </div>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 10px">
                    <p class="comment-comment">{{comment.comment}}</p>
                </el-row>
                <el-row class="fa-pull-right pb-1">
                    <p class="comment-user-time ">{{formatDate(comment.comment_time)}}</p>
                </el-row>
            </el-row>
            <el-row v-if="comment.deleted === 1">
                <el-row style="margin-top: 15px">
                    <p class="comment-comment">{{comment.comment}}</p>
                </el-row>
                <el-row class="fa-pull-right pb-1">
                    <p class="comment-user-time ">{{formatDate(comment.comment_time)}}</p>
                </el-row>
            </el-row>

            <el-row style="margin-left: 30px">
                <div v-for="reply in comment.replies">
                    <ReplyComponent :reply="reply" :forum="forum"/>
                </div>
            </el-row>
        </el-card>

    </div>
</template>

<script>
    import moment from "moment";
    import ReplyComponent from "./ReplyComponent";

    export default {
        name: "Comment",
        props: {
            comment: Object,
            forum: Object,
        },
        components: {
            ReplyComponent
        },
        data() {
            return {
                canEdit: Boolean,
                interval: null,
                mode: '',
                form: {
                    comment: '',
                },
            };
        },
        methods: {
            openReply(row) {
                this.dialogReplyVisible = true;
                this.parent = row;
            },
            editComment(item) {
                this.mode = 'Editar';
                this.form = _.cloneDeep(item);
                this.dialogFormVisible = true;
            },
            checkTime() {
                var minutes = moment().diff(moment(this.comment.comment_time), 'minutes');
                if (minutes >= 30) {
                    this.canEdit = false;
                    // here you could also already clear the interval, since it won't change
                } else if (minutes <= 29) {
                    this.canEdit = true;
                }
            }
        },
        created() {
            this.checkTime();
            this.interval = setInterval(() => {
                this.checkTime();
            }, 10000);
        },
        beforeDestroy() {
            clearInterval(this.interval);
        }
    };
</script>

Answer 1

If I understood your questions correctly, you want to communicate (pass data) from Child components to parent component (page).

The way we can achieve this is by $emitting events from Child components and have the parent component respond to these events.

So, in your editComment and openReply methods you would fire events like this:

        openReply(row) {
            this.$emit('openReply', {any payload that you would want pass to parent});
        },

        editComment(item) {
            this.$emit('editComment', {any payload that you would want pass to parent}
        },

And, in your parent component / page you would subscribe and handle those events. Pseudo-code below:

<Comment v-on:openReply="handleOpenReply"
         v-on:editCommnet="handleEditComment"/>

Further Reading:

Passing Data to Child Components With Props

Listening to Child Components Events