Question

我是vuejs的新手，我正在尝试为测试目的构建一个简单的单个文件组件。

＆＃xA;＆＃xA;

这个组件只显示一个bool和一个按钮更改bool值。＆＃xA;它还会侦听同时更改bool值的“customEvent”

＆＃xA;＆＃xA;

 ＆lt; template＆gt;＆＃xA; {{mybool}}＆＃xA; ＆lt; button v-on：click =“test”＆gt; test＆lt; / button＆gt;＆＃xA;＆lt; / template＆gt;＆＃xA;＆＃xA;＆lt; script＆gt; ＆＃XA; ipcRenderer.on（'customEvent'，（）=＆gt; {＆＃xA; console.log（'event received'）;＆＃xA; this.mybool =！this.mybool;＆＃xA;}）;＆＃ XA;＆＃XA;＆＃XA; export default {＆＃xA; data（）{＆＃xA;返回{＆＃xA; mybool：true，＆＃xA; };＆＃XA; }，＆＃XA;方法：{＆＃xA; test：（）=＆gt; {＆＃XA;的console.log（mybool）;＆＃XA; mybool =！mybool;＆＃xA; }，＆＃XA; }，＆＃XA; ＆;＆＃xA;＆lt; / script＆gt;＆＃xA;

＆＃xA;＆＃xA;

按钮工作正常。当我点击它时，值会发生变化。＆＃xA;但是当我收到我的事件时，“收到的事件”会显示在控制台中，但我的布尔值不会改变。

＆＃xA;＆＃xA;

有没有办法从我的代码中访问组件数据？

＆＃xA;＆＃xA;

谢谢和问候，＆＃xA; Eric

＆＃xA;

Answer 1

您可以将ipcRenderer.on(...)移动到vuejs的生命周期挂钩中，例如created。
请参阅：https://vuejs.org/v2/guide/instance.html#Instance-Lifecycle-Hooks

Answer 2

您正在使用

导出的组件选项之外设置事件侦听器

export default{ //... options }

在vue选项中设置事件监听器，以便vue实例控制它，在你的情况下修改dara属性

由于 choasia 建议将事件监听器移动到`created（）生命周期钩子：

<template>
  {{ mybool }}
  <button v-on:click="test">test</button>
</template>

<script>    



  export default {
    data() {
      return {
        mybool: true,
      };
    },
    methods: {
      test: () => {
        console.log(mybool);
        mybool = !mybool;
      },
    },
    created(){
        ipcRenderer.on('customEvent', () => {
            console.log('event received');
            this.mybool = !this.mybool;
        });
    }
  };
</script>

现在，即使创建了组件，您的组件也将开始侦听该特定组件

Vuejs <script>标记内的单个文件组件（.vue）模型更新

2 个答案: