[英]How to access mixins in functional component in Vue?
I have a following mixin: 我有以下mixin:
Vue.mixin({
computed: {
$_styles() {
return { backgroundColor: "red" }
}
}
})
Then, I have following functional component: 然后,我具有以下功能组件:
<template functional>
<!-- $_styles doesn't work -->
<div style="height: 100px; width: 100px;" :style="$_styles">
</div>
</template>
How do I actually access global variable, in this case it's $_styles
, inside functional component? 我实际上如何在函数组件内部访问全局变量(在本例中为
$_styles
?
You cannot do this with a template-based functional component but if you define your render
function, you can manipulate the context.data.style
property, including pulling the mixin values from the context.parent
component. 您不能使用基于模板的功能组件来执行此操作,但是如果定义了
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.