Question

我有以下混合：

Vue.mixin({
    computed: {
        $_styles() {
            return { backgroundColor: "red" }
        }
    }
})

然后，我具有以下功能组件：

<template functional>
    <!-- $_styles doesn't work -->
    <div style="height: 100px; width: 100px;" :style="$_styles">
    </div>
</template>

实际上如何在功能组件内部访问全局变量（在这种情况下为$_styles）？

Answer 1

您不能使用基于模板的功能组件来执行此操作，但是如果定义了render函数，则可以操纵context.data.style属性，包括从context.parent组件中提取混合值

Vue.mixin({
    computed: {
        $_styles() {
            return { backgroundColor: 'red' }
        }
    }
})

Vue.component('func-component', {
  functional: true,
  render (createElement, context) {
    const style = {
      height: '100px',
      width: '100px',
      ...context.parent.$_styles // get mixin styles from parent component
    }
    return createElement('div', {
      ...context.data,
      style // override context.data.style
    }, context.children)
  }
})

new Vue({el: '#app'})

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script>
<div id="app">
  <func-component></func-component>
</div>

Answer 2

另一个可与一些简单的mixin一起使用的解决方案：

Vue.mixin({
    computed: {
        $_styles() {
            return { backgroundColor: 'red' }
        }
    }
})

Vue.component('func-component', {
  functional: true,
  mixins: [styles],
  stylesMixin() {
    // grab styles from mixin using this.computed.
    return this.computed._styles()
  },
  render (createElement, context) {
    ...
  }
})

new Vue({el: '#app'})

现在使用$options访问本地stylesMixin函数

<template functional>
    <div style="height: 100px; width: 100px;" :style="$options.stylesMixin()">
    </div>
</template>

但是，如果您的mixin使用任何依赖项，则此方法将不起作用。

编辑：另一种方法是，在渲染时，mixin会计算出.Vue组件中的值，而工厂会预先计算该值并将其添加为对象属性。访问功能组件中的属性比mixins更容易。在您的示例中，将加载ajax调用，然后工厂将处理对象，并添加_styles作为属性。然后，您将访问props.myProp._styles。

如何在Vue的功能组件中访问Mixins？

2 个答案: