如何访问和响应Vue组件中的:class和:style更改

Question

我有一个Vue包装器，用于Select2组件，这是我不久前写的。包装器能够访问bind:class和bind:style属性以传递到Select2库，如下所示：

this.$vnode.data.staticClass // a string value of class="" attribut
this.$vnode.data.class       // an Object passed in via bind:class="{}" attribute
this.$vnode.data.style       // same as above but for style
this.$vnode.data.staticStyle

现在，我真的希望能够检测到这些更改，这样我就可以将它们传递到Select2内部。

如何做到这一点？

Answer 1

这是Select2:的函数包装器的一个变体

<template functional>
<component
:is="injections.components.Select2"
:ref="data.ref"
class="any_desired_static_classes"
:class="[
data.class,
data.staticClass,
]"
:style="[
data.style,
data.staticStyle,
]"
v-bind="data.attrs"
v-on="listeners"
>
<slot />
</component>
</template>
<script>
import Select2 from 'select2';
export default
{
name: 'SelectWrapper',
inject:
{
// workaround since functional components are stateless and can not register components in the normal way
components:
{
default:
{
Select2
}
}
}
};
</script>