在子组件中重用父组件的方法

Question

我的应用程序的结构是这样的：

根组件（安装在main.js内部（用vue-cli生成））：

<template @parallax-event="parallaxHandler" >
  <div id="app">
  <RepeatingWords></RepeatingWords>
  <NavigationBar></NavigationBar>
  <Intro></Intro>
  <router-view />
  </div>
</template>

该组件的脚本如下所示：

export default {
  components: {
    RepeatingWords,
    NavigationBar,
    Intro,
  },
  data() {
    return {
      parallaxMovement: Number,
      myWorldParagraph: String,
    }
  },
  methods: {
    parallaxHandler(factor, htmlElementString) {
      this.parallaxMovement = Math.round((window.scrollY / window.outerHeight) * - factor);
      this.myWorldParagraph = htmlElementString;
      console.warn(htmlElementString);
      htmlElementString.style.transform = 'translateX(' + (this.parallaxMovement - 0) + 'px)';
    }
  },
};

现在在我的子组件中（我想使用这个方法/触发这个事件）我有这个：

parallaxScrollEffect() {
    this.$emit('parallax-event', [200, document.querySelector('.some-html-elem')]);
},
mounted() {
    window.addEventListener('scroll', this.parallaxScrollEffect);
},

到目前为止发生了两件事：

在 Vue DevTools 选项卡 Events 上触发事件（很多是因为滚动），
参数有我给的值
没有任何控制台警告，
元素没有移动，除了 vue 工具，我没有得到任何反馈

我试过了：

在原始方法中说 factor.target 和 htmlElementString.target 但那没有用，
删除函数内除控制台日志之外的所有内容，并传递一个带有一些乱码字符串值的单个变量，例如：
```
this.$emit('parallax-event', ['123123qwe');
```
这也没有用。

我做错了什么？！

提前致谢。

编辑：修复了小错误 - 不是父变量而是参数

Answer 1

我整理了一个示例，遇到了两个与您的来源有关的问题。

我不得不将 "v-on" 处理程序放在子组件上，而不是放在根模板上。
发出的数组将是您的 parallaxHandler 的第一个参数。

根据 VueJS 文档：

Or, if the event handler is a method: Then the value will be passed as the first parameter of that method: https://vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-Event

示例App.vue：

<template >
    <div id="app">
        {{ emittedData }}
        <emit-test @emit-test="setEmittedData" />
    </div>
</template>

<script>
import EmitTest from './components/EmitTest.vue';

export default {
    name: 'app',
    data() {
        return {
            emittedData: ''
        };
    },
    components: {
        EmitTest
    },
    methods: {
        setEmittedData(val) {
            this.emittedData = val;
        }
    }
};
</script>

<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>

示例EmitTest.vue：

<template>
    <button @click.prevent="emitToParent">Emit Array</button>
</template>

<script>
export default {
    methods: {
        emitToParent() {
            this.$emit('emit-test', ['value 1', 'value 2']);
        }
    }
};
</script>

<style lang="scss" scoped>
</style>

单击按钮后的预期和测试输出： [ "value 1", "value 2" ]

在子组件中重用父组件的方法

Reusing method from parent component inside child component

vue.js

web

vue-events