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>

如何获取发送到Vue组件的默认内容插槽？

1 个答案: