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

Question

我正在尝试通过理解完成的代码来学习电子vue。 对于源代码，我使用的是 Eplee，这是一个用 vue js + electron 构建的 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. 它触发了addBookmark书签菜单.vue的方法

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://v2.vuejs.org/v2/guide/events.html https://v2.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"/>