Question

似乎你不能从组件中引用mixin方法（也不能像计算其他方法）。如果是这样，我如何定义父和子共享的方法？或者，如果mixin不能以这种方式工作，那么mixin的目的究竟是什么？我觉得我缺少一些基本的东西。例如：

<div id="parent">
    <child></child>
</div>

<script>
    var mixin, MyVue, vm;
    mixin = {
        methods: {
            say: function () {
                return "Hi";
            }
        }
    }
    MyVue = Vue.extend({
        mixins: [mixin]
    });
    vm = new MyVue({
        el: "#parent",
        components: {
            child: {
                template: "<div>{{ say() }}</div>"
            }
        }
    });
</script>

，控制台说[Vue warn]: Property or method "say" is not defined...

Answer 1

如果您想在多个组件之间共享mixin，而不是在所有组件之间共享，则可以在不使其全局化的情况下实现。方法如下：

/src/mixins/mixin.js

export default {
    created() {
      console.log("created a mixin!")
    },
    methods: {} //any methods you want go here
}

你的.vue组件中的

（例如：/src/components/Component.vue）

<script>
  import Mixin from '../mixins/mixin.js'
  export default {
     mixins: [Mixin],
....

最重要的是要在我的.js文件和我的.vue组件中使用export default。

Answer 2

您可以添加全局mixin

Vue.mixin({
    methods: {
        say: function () {
            return "Hi";
        }
    }
})

或将mixin添加到组件

vm = new MyVue({
    el: "#parent",
    components: {
        child: {
            template: "<div>{{say() }}</div>",
            mixins: [mixin]
        }
    }
});

Vue.js 2.x：Mixin不能从组件中引用？

2 个答案: