我可以在组件的插槽中使用计算属性吗？答案

【问题标题】：Can I use computed properties within component's slot?我可以在组件的插槽中使用计算属性吗？
【发布时间】：2018-07-05 17:08:40
【问题描述】：

最近我发现我不能在组件槽中使用计算属性或数据属性。即使在组件中定义了计算，我也无法在组件的插槽中使用它。有什么办法让它工作吗？

示例代码：

Vue.component('test-component', {
   template: '<div><slot></slot></div>',
   computed: {
      my_computed: function(){
         return 2+3; // not defined in slot
      }
    }
})
<div id="app">
     <test-component>
        <span v-text="my_computed"></span>
     </test-component>
</div>

在此处查看实时示例， https://jsfiddle.net/gu9jh4n0/1/

【问题讨论】：

标签： vue.js vuejs2 slot computed-properties

【解决方案1】：

您可以使用Scoped Slot 来实现。

在您的示例中，您的组件将如下所示：

Vue.component('test-component', {
  template: '<div><slot :computed="my_computed"></slot></div>',
  computed: {
    my_computed: function(){
        return 2+3; // not defined in slot
    }
  }
});

主模板将检索槽的范围并使用计算的：

<test-component>
  <span slot-scope="data" v-text="data.computed"></span>
</test-component>

Live example.

【讨论】：