reactjsvue.jselectron-vue

In vue-electron, how to do you bind data between a parent and child components?


I am trying to learn electron-vue by understanding a finished code. For the source, I am using Eplee, which is an epub reader built with vue js + electron Here is the source link to Eplee. https://github.com/Janglee123/eplee

<!-- BookmarkMenu.vue -->

<template>
    <el-popover :popper-class="`popper ${theme}`" width="350" trigger="hover">
        <div class="el-popover__title">
            Bookmarks
            <el-button size="mini" icon="el-icon-plus" circle @click="addBookmark" />
        </div>
        <el-button slot="reference" size="small" icon="el-icon-collection-tag" circle />
        <el-tree :data="bookmarks" node-key="id" @node-click="onNodeClick">
            <span slot-scope="{ node }" class="custom-tree-node">
                <span>{{ node.label }}</span>
                <span>
                    <el-button type="text" icon="el-icon-close" @click="() => removeBookmark(node)" />
                </span>
            </span>
        </el-tree>
    </el-popover>
</template>

<script>
export default {
    name: 'BookmarkMenu',
    props:{
        bookmarks:{
            default:()=>{},
            type: Array,
        },
        theme:{
            default:'default',
            type:String,
        }
    },
    methods:{
        addBookmark(){
            this.$emit('add-bookmark');
        },
        removeBookmark(data){
            this.$emit('remove-bookmark',data);
        },
        onNodeClick(data){
            this.$emit('node-click',data);
        }
    }
}
</script>

<style lang="scss" scoped>

</style>

I do not understand how data is binded here.

For example, <el-button size="mini" icon="el-icon-plus" circle @click="addBookmark" /> when there is a click

  1. it triggers addBookmark method of BookmarkMenu.vue

  2. addBookmark Method triggers 'add-bookmark' of the parent component

But, <el-button></el-button> is just a class added for the purpose of styling, not a parent component.

For both vue and react, I thought in order to import components from a different file and properly place them I need to place two things.

  1. import line
  2. placement line

Question 1: Is this a proper way to import? or do you only need 1. import line?

Question 2: So, in vue-electron, how to do you bind data between a parent and child components?

What I am assuming is the file structor take cares of it https://github.com/SimulatedGREG/electron-vue/blob/master/docs/en/renderer-process.md


Solution

  • Electron is just a runtime for your web app.

    Take a look at Vue.js's event model.

    https://v2.vuejs.org/v2/guide/events.html https://v2.vuejs.org/v2/guide/components-custom-events.html

    Also, check out component guide https://ru.vuejs.org/v2/guide/components.html

    In your case

    <el-button></el-button> is just a class added for the purpose of styling, not a parent component.

    It is not a parent component it is a child component of <BookmarkMenu> component. And it may contain absolutely anything inside.

    And this.$emit('add-bookmark'); method triggers an event listener (if any) of a component which would have <BookmarkMenu> as a child.

    For example <BookmarkMenu @add-bookmark="someHandlerInAComponentContainingBookmarkMenu"/>