Vue.js 如何将指令绑定到VueJS中的自定义组件？

因此，我正在使用vue cli，这是我当前的组件代码：

<template>
<div>
  <v-row>
    <v-col xl3 md3 xs12>
      <strong>{{field}}</strong>
    </v-col>
    <v-col xl9 md9 xs12>
      {{value}}
    </v-col>
  </v-row>
</div>
</template>

<script>
    export default {
       data() {
           return {

           }
       },
       props: ['field', 'value']
    }
</script>

{{field}
{{value}}
导出默认值{
数据（）{
返回{
}
},
道具：['field'，'value']
}

我在我的模板中使用它，就像这样

<template>
<two-column field="Some Field" value="Some Value"></two-column>
</template>

<script>
import TwoColumnRow from './vuetify_modifications/TwoColumnRow'
...
</script>

从“/vuetify\u修改/TwoColumnRow”导入TwoColumnRow
...

现在一切都很好，但是如果我想使网格大小动态化呢？例如，我用

---

可能吗？提前感谢。

我能够实现这一点的一种方法是使用计算属性

为了创建示例的简单性，我使用了颜色来表示正在发生的事情。由于您真正要问的似乎是如何在组件内动态应用类或基于值的条件，因此应该进行一些调整

const TwoColumnRow=Vue.component（'two-column'{
模板：“#两列行模板”，
数据：函数（）{
返回{}
},
道具：['field'，'value'，'colors']，
计算：{
颜色列表：函数（）{
//按空间分割颜色字符串并返回值数组
返回此.colors.split（“”）；
}
}
});
const vm=新的Vue({
el:“#应用程序容器”，
数据：{}
});
.red{
颜色：红色；
}
蓝先生{
颜色：蓝色；
}

{{field}}
{{value}}
这个怎么样：

<foo :sizes="{ xl3: '', md3: '', xs12: '' }"></foo>



以及：


{{field}
导出默认值{
道具：{
大小：{type:Object，默认值：（）=>{}
// ...
}
}
请您将您的示例放在JSFiddleWorks中好吗。非常感谢。
<template>
<div>
  <v-row>
    <v-col v-bind="sizes">
      <strong>{{field}}</strong>
    </v-col>
  </v-row>
</div>
</template>

<script>
    export default {
       props: {
           sizes: { type: Object, default: () => {} }
           // ...
       }
    }
</script>