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

Question

所以我用vuetify与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> 

，我使用它在我的模板，这样

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

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

现在一切都完美地工作，但如果我想使网格大小动态？例如像我喜欢的东西

<two-column field="Some Field" value="Some Value" sizes="xl3 md3 xs12"></two-column>

做这可能吗？先谢谢你。

Answer 1

如何：

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

和：

<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> 

Answer 2

我已经能够做到这一点的一种方法是通过使用计算属性。

为了简化创建示例，我用颜色来表示正在发生的事情。既然看起来像所有你真正要问的是，你怎么能动态地在组件内部应用类或基于值的条件，这应该适用于一些调整。

const TwoColumnRow = Vue.component('two-column', { 
 
    template: '#two-column-row-template', 
 
    data: function() { 
 
    return {} 
 
    }, 
 
    props: ['field', 'value', 'colors'], 
 
    computed: { 
 
    colorList: function() { 
 
     // Split the string of colors by space and return an array of values 
 
     return this.colors.split(' '); 
 
    } 
 
    } 
 
}); 
 

 
const vm = new Vue({ 
 
    el: '#app-container', 
 
    data: {} 
 
});

.red { 
 
    color: red; 
 
} 
 

 
.blue { 
 
    color: blue; 
 
}

<script src="https://unpkg.com/vue@2.1.10/dist/vue.js"></script> 
 
<div id="app-container"> 
 
    <table> 
 
    <two-column field="toast" value="cheese" colors="blue red"></two-column> 
 
    </table> 
 
</div> 
 

 
<script type="x-template" id="two-column-row-template"> 
 
    <tr> 
 
    <td v-bind:class="colorList[0]">{{field}}</td> 
 
    <td v-bind:class="colorList[1]">{{value}}</td> 
 
    </tr> 
 
</script>

这将运行，所以你可以插入一些语句{{colorList}}组件里面看到的是什么渲染。