Vue组件脚本中如何获取作用域插槽的myObject数据？

嘿，这个问题我之前也碰到过，咱们来一步步拆解解决它～

首先得搞清楚核心原因：你在组件B的data里定义的myObject，和作用域插槽传递过来的myObject是完全独立的两个变量——插槽里的变量只在模板范围内生效，和组件脚本里的data属性没有自动绑定关系，所以插槽数据变化时，脚本里的变量自然不会跟着更新。

下面给你两种不用创建子组件C的解决方案，都是符合Vue规范的：

方法一：通过组件事件传递数据（推荐） #

这种方式利用Vue的父子组件通信机制，让组件A在myObject变化时主动通知组件B，组件B再同步自己的data。

修改组件A的代码 #

<template>
  <div>
    <slot :myObject="myObject" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      myObject: {/* 你的初始数据 */}
    }
  },
  watch: {
    // 监听myObject变化，一旦更新就通知父组件（组件B）
    myObject(newVal) {
      this.$emit('my-object-updated', newVal);
    }
  }
}
</script>

修改组件B的代码 #

<template>
  <component-a @my-object-updated="syncMyObject">
    <template slot-scope="{myObject}">
      <!-- 这里依然正常使用插槽传递的myObject -->
      <p>{{ myObject.someProperty }}</p>
    </template>
  </component-a>
</template>

<script>
module.exports = {
  data() {
    return {
      myObject: null
    }
  },
  methods: {
    // 接收组件A传来的最新数据，同步到自己的data里
    syncMyObject(newVal) {
      this.myObject = newVal;
      // 现在你就能在脚本的任何地方使用this.myObject啦
    }
  }
}
</script>

方法二：在插槽模板中直接同步数据 #

如果没法修改组件A的源码，可以在组件B的插槽模板里，通过触发组件方法来同步数据。这种方式不需要组件A配合，但依赖模板的渲染时机：

<template>
  <component-a>
    <template slot-scope="{myObject}">
      <!-- 正常使用插槽数据 -->
      <p>{{ myObject.someProperty }}</p>
      <!-- 用隐藏元素监听数据变化，调用组件方法同步 -->
      <div 
        style="display: none" 
        :key="JSON.stringify(myObject)"
        @mounted="syncMyObject(myObject)"
        @updated="syncMyObject(myObject)"
      ></div>
    </template>
  </component-a>
</template>

<script>
module.exports = {
  data() {
    return {
      myObject: null
    }
  },
  methods: {
    syncMyObject(newVal) {
      this.myObject = newVal;
    }
  }
}
</script>

这里用key属性触发元素的更新，每次myObject变化时，元素会重新渲染，进而调用updated钩子同步数据到组件的data里。

总结 #

优先推荐方法一，因为它更符合Vue的组件通信设计，逻辑清晰且不依赖DOM元素；方法二更适合无法修改组件A源码的场景。

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