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

琉球

我试图通过理解完成的代码来学习电子竞技。对于源,我使用的是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. 它触发addBookmarkBookmarkMenu.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

伊万·克洛奇科夫(Ivan Klochkov)

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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在父组件中使用Vue.js子组件中的数据?

来自分类Dev

如何在父Vue中触发组件?

来自分类Dev

Vue 如何将子组件和父组件数据传递给方法

来自分类Dev

如何在Vue中的非父子组件之间共享数据

来自分类Dev

从Firestore在单个Vue组件中获取父文档和子文档数据

来自分类Dev

如何在 vue-test-utils 中为子 vue 组件设置数据?

来自分类Dev

如何在Vue中具有绑定数据的DIV之间切换?

来自分类Dev

如何在兄弟 vue.js 组件之间共享数据?

来自分类Dev

在Vue.JS的父组件中创建子组件

来自分类Dev

在Vue.JS的父组件中创建子组件

来自分类Dev

如何在Vue组件内绑定模型

来自分类Dev

在 Vue 组件中添加子 Vue 组件

来自分类Dev

如何从 Vue 2 中的父组件获取子组件的观察者的更新值?

来自分类Dev

如何在 Vue.js 中将数据从父组件传递给子组件?

来自分类Dev

如何在 Vue.js 中将数据从父组件发送到子组件

来自分类Dev

Vue作用域插槽在组件和插槽之间的两种方式数据绑定

来自分类Dev

如何在回调中访问Vue组件数据

来自分类Dev

如何从Vue.js的子组件访问父方法?

来自分类Dev

vue单击父按钮,使子组件中的按钮单击

来自分类Dev

子组件中的Vue道具

来自分类Dev

将样式绑定到Vue的子组件中

来自分类Dev

如何在Vue中扩展组件的行为

来自分类Dev

如何在VUE组件的mapState中调用“ this”?

来自分类Dev

如何在vue中复制组件状态?

来自分类Dev

如何在Vue中用子路由组件替换父视图

来自分类Dev

如何在Vue的A组件中预加载B组件的图像?

来自分类Dev

Vue - 无法获取父组件数据

来自分类Dev

Vue,如何从组件调用数据

来自分类Dev

Vuex商店和Vue组件之间的数据未同步

Related 相关文章

热门标签

归档