1

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

根组件（安装在 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');

    这也没有用。

我究竟做错了什么？！

先感谢您。

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

4

1 回答 1

1

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

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

根据 VueJS 文档：

或者，如果事件处理程序是一个方法：那么该值将作为该方法的第一个参数传递： https ://vuejs.org/v2/guide/components.html#Emitting-a-Value-With-an-事件

示例 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" ]

于 2019-12-12T21:18:03.127 回答