Vue没有将事件传递给孩子答案

【问题标题】：Vue not passing events to childVue没有将事件传递给孩子
【发布时间】：2018-07-13 08:15:23
【问题描述】：

在原始 HTML/CSS/JS 中，我们在子元素中滚动工作、粘性标题和滑动删除。但是，在父 div 元素上初始化 Vue 后，所有功能立即丢失。只有父 div 滚动，并且只有点击事件被触发（标题不再粘滞，滑动甚至不再被子元素注册）。

有没有办法让 Vue 通过父级传递事件或使 Vue 无法覆盖我们的自定义动画？

我如何在index.js 中使用 Vue：

var app = new Vue({
    el: '#root',
    mounted() {
        window.onscroll = function () {
            myFunction()
        }
        swipeable()
    },
    data: {
        e: []
    },
    methods: {
        refresh: function () {
          e = ... mutate e like this ...
        }
    },
    updated: function () {
        this.$nextTick(function () {
            console.log("Update finished.")
            swipeable()
        })
    }
})

调用的函数只是将一些基本的 jQuery 和 Hammer 侦听器应用于不同的元素。

HTML 是这样构造的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Aiko</title>
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
</head>

<body>
    <div class="loader"></div>
    <div class="top-container">
        ... raw html ...
    </div>

    <ul class="messages" id="root">
        <li v-for="el in e">
            <div class="message">
                <h3>{{el.header.title}}</h3>
          <div class="messages-bottom">
              ... raw html ...
          </div>
        </div>
        <button class="button-delete">Delete</button>
      </li>
    </ul>


    <div class="footer">
        ... raw html ...
    </div>


    <script src='https://hammerjs.github.io/dist/hammer.min.js '></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/index.js"></script>
</body>

</html>

【问题讨论】：

要从父级到子级进行通信，您必须使用属性属性而不是事件，事件是用于子级和父级之间的通信
道具向下↓，事件向上↑
我们的定制主要是 Hammer 和 jQuery，也只是滚动。父元素滚动，但子元素不滚动。我们设置的 Hammer 事件不会触发，而是与 Vue 完全分离（它们不与任何 Vue 事件绑定）

标签： javascript html css vue.js

【解决方案1】：

您需要在根组件的mounted() 方法中移动自定义插件、事件监听器等的初始化。

例如：

<template>
    <div ref="sampleElement">Target Element</div>
</template>

<script>
    export default {
        mounted: function() {
            $(this.$refs.sampleElement).myPlugin();
        }

    }
</script>

【讨论】：

我们不初始化任何插件，它们是通过 JS CDN 导入并被调用的（例如 jquery 和hammer）。我尝试通过 Vue 调用 jQuery 和 Hammer 函数也无济于事——似乎事件只是没有触发
你没有使用任何像 webpack 这样的模块打包工具？
不，这是一个非常简单的Vue使用，只是为了让v-for动态渲染一个列表。我们通过脚本标签包含它
如果您只在代码的特定部分使用 vue，您的 vue 实例不需要附加到根元素。您可以将其附加到包含使用 vue 的列表的特定容器元素。
这和vuejs的渲染功能有关，这里的问题可能是vue重新渲染视图时我们删除的事件。因此，您需要在每次重新呈现列表时重新初始化我们丢失的那些事件。请问您使用的是什么刷卡库？您是否已经检查过他们关于重新初始化功能的文档？