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

时间:2018-01-12 09:10:47

标签: vuejs2 transition mixins

我有jQuery样式幻灯片动画的方法,我在很多组件中使用它。为了在修复错误的同时干掉我的代码,我尝试将方法移到mixin,但现在我只是在加载时出错:

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

这是我到目前为止所做的事情;我需要从中解决这个问题?

过渡mixins.js

<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>

我-component.vue

<VirtualHost mysite.com:443>

1 个答案:

答案 0 :(得分:2)

你的mixin不正确。

点击此处的文档:https://vuejs.org/v2/guide/mixins.html

您必须将函数放在方法对象中,然后将其与组件方法对象合并。

<强>过渡mixins.js

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