Vue.js 组件插槽无法绑定内部数据问题咨询

嘿，这个问题我之前也踩过坑！核心原因是插槽内容的作用域属于父组件，而不是你写的button-counter子组件，所以你没法直接在插槽里引用子组件内部的count变量。要解决这个问题，咱们得用Vue的作用域插槽（Scoped Slots），它专门用来让父组件的插槽内容访问子组件里的数据。

具体解决步骤： #

1. 子组件暴露内部数据给插槽：在子组件的<slot>标签上，用v-bind把需要传递的内部数据绑定上去，相当于把数据"抛"给插槽。
2. 父组件接收并使用插槽数据：在使用组件的时候，用v-slot（Vue 2.6+的语法，也可以用旧的slot-scope）来接收子组件传递过来的数据，然后就能在插槽内容里用啦。

修改后的完整代码示例： #

HTML部分：

<div id="app">
  <!-- 用v-slot接收子组件传递的插槽数据，这里命名为slotProps -->
  <button-counter v-slot="slotProps">
    My counter: <span v-text="slotProps.count"></span>
  </button-counter>
</div>

JavaScript部分：

// 定义名为button-counter的新组件
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  // 在slot标签上用v-bind把count暴露出去
  template: '<button v-on:click="count++"><slot v-bind:count="count"></slot></button>'
})

// 初始化示例
var demo = new Vue({
  el: '#app'
})

补充说明： #

• 如果是Vue 2.6之前的版本，你可以用slot-scope代替v-slot，写法是<button-counter slot-scope="slotProps">...</button-counter>，效果是一样的。
• 你也可以给v-slot起更简洁的名字，比如v-slot="{ count }"，这样就能直接用count代替slotProps.count，代码会更清爽：

<button-counter v-slot="{ count }">
  My counter: <span v-text="count"></span>
</button-counter>

这样改完之后，你就能在插槽内容里正常访问子组件的count数据啦！

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