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

Posted 2023-02-23

【中文标题】在 vue-electron 中，如何在父子组件之间绑定数据？

【英文标题】：In vue-electron, how to do you bind data between a parent and child components?

【发布时间】：2020-04-15 01:34:12

【问题描述】：

我正在尝试通过理解完成的代码来学习 electron-vue。 对于源码，我使用的是Eplee，它是一个使用vue js + electron 构建的epub 阅读器 这是Eplee的源链接。 https://github.com/Janglee123/eplee

<!-- BookmarkMenu.vue -->

<template>
    <el-popover :popper-class="`popper $theme`"  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" /> 当有点击时

触发BookmarkMenu.vue的addBookmark方法

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

【参考方案1】：

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

看看 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"/>

【讨论】：

嘿，你是对的。这就是为什么我很困惑。如果您查看源代码，则没有像 <BookmarkMenu></BookmarkMenu> 这样的东西。 github.com/Janglee123/eplee

有-github.com/Janglee123/eplee/blob/master/src/renderer/views/…

Klochko 我明白我的错误了。 childComponent="parentComponent", not "parentComponent" = childComponent 并且 Vue 不需要我像 这样用 parentComponent 包装谢谢！