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选项卡上的事件事件被触发（很多原因是由于滚动）
参数具有我提供的值
没有控制台发出警告，
该元素不动，除了使用vue工具外，我没有得到任何反馈

我尝试过：

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

我在做什么错？！

谢谢。

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

Answer 1

我整理了一个示例，发现您的来源遇到了两个问题。

我不得不将“ v-on”处理程序放在子组件上，而不是在根模板上。
发出的数组将是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>

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

从子组件内部的父组件重用方法

1 个答案: