Vue中无法将Subject作为参数传递的问题求助

嘿，我看你是想把RxJS的Subject实例作为props传给<jg-header>子组件但遇到了问题，咱们一步步来搞定它：

1. 先确认子组件的Props声明 #

首先得保证你的<jg-header>子组件正确定义了subject这个props，因为Vue会自动忽略未声明的props。可以这样写：

// jg-header组件的脚本
export default {
  props: {
    greeting: String,
    subject: {
      type: Object,
      required: true,
      // 要是想做更严格的类型校验，可以加个验证器
      validator: (val) => val instanceof Rx.Subject
    }
  }
}

如果子组件没声明这个props，就算父组件传了，子组件也接收不到哦。

2. 修正Vue-Rx的使用逻辑 #

你用了subscriptions选项（应该是vue-rx的功能），但要注意：这个选项的作用是自动订阅Observable，把它发射的值绑定到组件属性上，而不是把Observable实例本身变成组件的响应式属性。

如果你只是想传递Subject实例给子组件，完全不需要通过subscriptions，直接把它放到data里就行：

<template>
  <jg-header :greeting="greeting" :subject="messageObservable"></jg-header>
</template>

<script>
import * as Rx from 'rxjs/Rx';

export default {
  data() {
    return {
      greeting: "My Name",
      messageObservable: new Rx.Subject() // 直接把Subject实例放在data里
    }
  }
}
</script>

另外，你原来的subscriptions写法还有个小坑：如果在subscriptions里用this.messageObservable，因为subscriptions的初始化时机在data之前，会导致this.messageObservable是undefined，这也是潜在问题哦。

3. 既要订阅值又要传递Subject？这样做 #

如果你既要订阅这个Subject发射的值，又要把Subject实例传给子组件，可以这么写：

<template>
  <jg-header :greeting="greeting" :subject="messageObservable"></jg-header>
</template>

<script>
import * as Rx from 'rxjs/Rx';

export default {
  data() {
    return {
      greeting: "My Name",
      messageObservable: new Rx.Subject()
    }
  },
  subscriptions() {
    // 这里订阅Subject的值，绑定到message$属性供组件内部使用
    return {
      message$: this.messageObservable
    }
  }
}
</script>

这样message$会拿到Subject发射的每一个值，而messageObservable作为Subject实例可以直接传给子组件。

4. 小细节：模板拼写错误 #

你的Pug模板里写了{{ greetin...，看起来是greeting的拼写错误，虽然这不是传递Subject的问题，但也会导致渲染异常，记得修正哦。

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