[英]How to access mixins in functional component in Vue?
我有以下mixin:
Vue.mixin({
computed: {
$_styles() {
return { backgroundColor: "red" }
}
}
})
然后,我具有以下功能组件:
<template functional>
<!-- $_styles doesn't work -->
<div style="height: 100px; width: 100px;" :style="$_styles">
</div>
</template>
我实际上如何在函数组件内部访问全局变量(在本例中为$_styles
?
您不能使用基于模板的功能组件来执行此操作,但是如果定义了render
函数,则可以操纵context.data.style
属性,包括从context.parent
组件中提取mixin值。
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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.