Question

这个问题是关于vue.js，它在使用webpack配置的样板上运行。

我需要动态地将sass变量从组件father传递到组件son（为了简化命名）。

在组件father上的

我可以从样式标记访问$color变量。我正在使用这个html模板调用son组件：

// father component
    <template>
        <son></son>
    </template>
    <style lang='sass' scoped>
        @import 'assets/sass/color';
    </style>

导入的sass变量$color需要来自father并更改son的背景

让我们说儿子只是一个简单的div。

// son component
    <template>
        <div></div>
    </template>

    <style lang=sass scoped>
        div {
            width: 200px;
            height: 200px;
        }
    </style>

这样做的正确方法是什么？

Answer 1

你可以导入sass并使用像

这样的绑定

<p v-bind:style="[baseStyles, overrideStyles]">
baseStyles and overrideStyles
</p>

修改

或者您可以执行类似
的操作
<template> <div v-bind:class="$style.my_component">Hello</div> </template> <style module> .my_component { color: purple; // still the best color ever } </style>

Answer 2

除了您的范围样式之外，您还可以在同一组件中使用全局组件，这些组件将暴露给子组件。只需在组件中添加新样式标记，而无需使用scoped键。

你的组件可能看起来像那样。

<style>
/* global styles */
</style>

<style scoped>
/* local styles */
</style>

Source

vue.js - 将sass样式从一个组件绑定到另一个组件

2 个答案: