Vue组件插槽内能否使用计算属性？求可行解决办法

咱们先搞清楚问题出在哪：Vue里的普通插槽是绑定父组件作用域的。你在<test-component>内部写的插槽内容，本质上属于父组件（也就是#app对应的Vue实例），所以当你引用my_computed时，Vue会去父实例里找这个属性，而不是子组件test-component的内部，自然就找不到啦。

作用域插槽的核心就是让子组件能把自身的属性（包括计算属性、数据）“传递”给插槽内容，这样插槽里就能访问到子组件的内部属性了。具体分两步操作：

1. 子组件修改：把属性传递给插槽 #

在子组件的模板里，给<slot>标签绑定需要传递的属性，把你的计算属性my_computed传出去：

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

这里:myComputed="my_computed"是把子组件的计算属性my_computed以myComputed的名称传递给插槽（命名可以自定义，比如叫calcVal也完全没问题）。

2. 父组件修改：接收插槽传递的属性 #

在父组件使用插槽时，需要通过对应语法接收这些属性，根据Vue版本不同有两种写法：

Vue 2.6+ 推荐写法 #

<div id="app">
  <test-component v-slot="slotProps">
    <span v-text="slotProps.myComputed"></span>
  </test-component>
</div>

这里的slotProps是自定义的对象名，里面包含了子组件传递过来的所有插槽属性，通过slotProps.myComputed就能拿到子组件的计算属性值了。

Vue 2.x 兼容写法（旧版语法） #

如果你的Vue版本低于2.6，可以用slot-scope：

<div id="app">
  <test-component>
    <span slot-scope="slotProps" v-text="slotProps.myComputed"></span>
  </test-component>
</div>

这样修改之后，插槽里就能正确显示5，完美解决你的问题~

内容的提问来源于stack exchange，提问作者El Danielo