我试图通过理解完成的代码来学习电子竞技。对于源,我使用的是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" />
当点击
它触发addBookmark
BookmarkMenu.vue的方法
addBookmark
'add-bookmark'
父组件的方法触发器
但是,<el-button></el-button>
仅仅是出于样式目的而添加的类,而不是父组件。
对于vue和react,我认为为了从其他文件导入组件并正确放置它们,我需要放置两件事。
问题1:这是导入的正确方法吗?还是只需要1.导入行?
问题2:那么,在vue-electron中,如何在父组件和子组件之间绑定数据?
我假设文件构造函数会照顾它https://github.com/SimulatedGREG/electron-vue/blob/master/docs/en/renderer-process.md
Electron只是您的Web应用程序的运行时。
看一下Vue.js的事件模型。
https://vuejs.org/v2/guide/events.html https://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"/>
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句