Question

我想根据我正在使用它的父组件将类设置为子组件。所以，例如，我有一个下拉菜单，我想在更多的组件中使用，但我想根据我使用它的组件给它一个不同的类。像这样的东西，父组件顶栏：

<dropdown-menu :menu="link" :parent:'top-bar'></dropdown-menu>

然后在下拉菜单组件中：

<div class="dropdown" :class="{ parent: parent }">

<script>
  export default {
    name: 'dropdown-menu',
    props: ['parent'],

但是，这不起作用，我该怎么做？

Answer 1

你有一个错字:parent:'top-bar' - ＆gt; :parent='top-bar'并且您的类绑定将始终通过父母＆＃39;字符串作为一个类。了解详情here。

我也做了一个小例子：

＆＃13;

Vue.component('parent1', {
  template: '<div><dropdown-menu :menu="link" :parent="top_bar"></dropdown-menu></div>',
  data () {
      return {
          link: 'a link',
          top_bar: 'parent1'
      }
  }
});

Vue.component('parent2', {
  template: '<div><dropdown-menu :menu="link" :parent="top_bar"></dropdown-menu></div>',
  data () {
      return {
          link: 'another link',
          top_bar: 'parent2'
      }
  }
});

Vue.component('dropdown-menu', {
  template: '<div class="dropdown" v-bind:class="parent">{{ menu }}</div>',
  props: ['parent', 'menu']
});

var vm = new Vue({
  el: '#app'
});

＆＃13;

.parent1 {
    color: red;
}

.parent2 {
    color: blue;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.2/vue.js"></script>

<div id="app">
  <parent1></parent1>
  <parent2></parent2>
</div>

＆＃13;

Vue - 使用属性值绑定css类名

1 个答案: