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
it triggers addBookmark
method of BookmarkMenu.vue
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.
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
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"/>