如何將指令綁定到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}}組件裏面看到的是什麼渲染。