在vue-electron中，如何在父组件和子组件之间绑定数据？

Question

我正在尝试通过理解完成的代码来学习电子竞技。对于源，我使用的是Eplee，这是使用vue js + electronic构建的epub阅读器这是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>

我不明白这里的数据是如何绑定的。

例如，<el-button size="mini" icon="el-icon-plus" circle @click="addBookmark" />点击时]

1. 它会触发BookmarkMenu.vue的addBookmark方法

2. [addBookmark方法触发上级组件的'add-bookmark'

但是，<el-button></el-button>只是出于样式目的而添加的类，而不是父组件。

对于vue和react，我认为为了从其他文件导入组件并正确放置它们，我需要放置两件事。

1. 导入行
2. 展示位置线

问题1：这是导入的正确方法吗？还是只需要1.导入行？

问题2：那么，在vue-electron中，如何在父组件和子组件之间绑定数据？

我假设文件构造函数会照顾它https://github.com/SimulatedGREG/electron-vue/blob/master/docs/en/renderer-process.md

Answer 1

Electron只是您的Web应用程序的运行时。

看看Vue.js的事件模型。

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

也请查阅组件指南https://ru.vuejs.org/v2/guide/components.html

根据您的情况

<el-button></el-button>只是出于样式目的而添加的类，而不是父组件。

它不是父组件，它是<BookmarkMenu>组件的子组件。并且其中可能绝对包含任何东西。

[this.$emit('add-bookmark');方法将触发将<BookmarkMenu>作为子级的组件的事件侦听器（如果有）。

例如<BookmarkMenu @add-bookmark="someHandlerInAComponentContainingBookmarkMenu"/>