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

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);
},

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

1. 在 Vue DevTools 选项卡上事件被触发（其中很多是因为滚动），
2. 参数具有我给出的值
3. 没有任何控制台警告，
4. 元素没有移动，除了 vue 工具外，我没有收到任何反馈

我试过了：

1. 在原始方法中使用 factor.target 和 htmlElementString.target 但这不起作用，

2. 删除函数内除控制台日志之外的所有内容，并传递一个带有一些乱码字符串值的单个变量，例如：

   this.$emit('parallax-event', ['123123qwe');
   

   这也没用。

我做错了什么？！

提前谢谢你。

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

Answer 1

我整理了一个示例，并在您的来源中遇到了两个问题。

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

根据 VueJS 文档：

或者，如果事件处理程序是一个方法： 然后该值将作为该方法的第一个参数传递： 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>

单击按钮后的预期和测试输出： [“值 1”，“值 2”]