Question

在我的home.vue中，在模板中我放了几个组件，它们没有包含它们的包装器，代码如下：

<template>
  <div class="home">
    <banner></banner>
    <div class="functions">
      <function-intro></function-intro>
      <function-intro></function-intro>
      <function-intro></function-intro>
      <function-intro></function-intro>
    </div>

  </div>
</template>

<script>

  import Banner from './components/banner.vue'
  import FunctionIntro from './components/function-intro.vue'

  export default{

    components: {
      'banner': Banner,
      'function-intro': FunctionIntro   
    }

  }
</script>

<style>

  .home {
    clear:both;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;

    min-height: 480px;
    margin: 0;
    padding: 0;
  }

  .functions {

  }

</style>

您看到我导入了一个FunctionIntro组件。

现在可以为他们添加样式吗？

我无法以正常方式选择它们：

.functions function-intro {

}

这是错误的。

Answer 1

您应该在自己的<style>中管理组件样式，并在父组件中传递该类：

举个例子。

在您的父组件中传递类：

<template>
  <div class="home">
    <banner></banner>
    <div class="functions">
      <function-intro :class="'inline-block'"></function-intro>
      <function-intro :class="'inline-block'"></function-intro>
      <function-intro :class="'inline-block'"></function-intro>
      <function-intro :class="'inline-block'"></function-intro>
    </div>

  </div>
</template>

子组件中的

（有FunctionIntro组件）样式：

.inline-block {
  display: inline-block;
}

如何为组件添加样式？

1 个答案: