Transition 找不到在 Vue Mixin 中导入的方法

Question

我有 jQuery 风格的幻灯片动画方法，我在许多组件中使用了这些方法。为了在修复 bug 的同时干燥我的代码，我尝试将方法移动到 mixin，但现在我只是在加载时遇到错误：

属性或方法 "slideEnter" 未在实例上定义但在渲染期间被引用

这是我到目前为止所做的；我需要解决什么问题？

过渡-mixins.js

exports = {
  slideEnter: function() {...},
  slideLeave: function() {...}
}

我的-component.vue

<template>
  <div>
    <button @click="show = !show">Toggle</button>
    <transition 
       v-on:enter="slideEnter"
       v-on:leave="slideLeave">
         <p v-show="show">My Content</p>
    </transition>
  </div>
</template>

<script>
  import TransitionsMixin from '../transitions.js'

  export default {
    name: 'my-component',
    mixins: [TransitionsMixin],
    data: function() {
      return {
        show: false
      }
    }
  }
</script>

Answer 1

你的 mixin 不正确。

在此处查看文档：https://vuejs.org/v2/guide/mixins.html

您必须将您的函数放在一个方法对象中，然后该对象会与您的组件方法对象合并。

过渡-mixins.js

export default {
  methods: {
    slideEnter: function() {...},
    slideLeave: function() {...}
  }
}

Transition 找不到在 Vue Mixin 中导入的方法

Methods imported in Vue Mixin not found by Transition

transition

mixins

vuejs2