如何將默認內容槽發送到 Vue 組件？

Question

在下面的示例中，我想要一個將數字加倍的組件。 這個數字不是作為屬性傳遞的，而是作為內容傳遞的。 如何在 Vue 中獲取內容值？

 var twice = { template: '<div>{{ value }}</div>', computed: { value() { return parseInt(this.$slot) * 2; } } }; new Vue({ el: '#app', components: { twice: twice } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script> <div id="app"> <twice>21</twice> </div>

Answer 1

您可以通過this.$slots.default[0].text訪問默認插槽文本：

 var twice = { template: `<div> number : <slot></slot><br> <div>double : {{ value }}</div> </div>`, computed: { value() { return parseInt(this.$slots.default[0].text) * 2; } }, mounted() { console.log(this.$slots.default[0].text) } }; new Vue({ el: '#app', components: { twice: twice } });

 <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div id="app"> <twice>21</twice> <div> </div> </div>