Vue.js如何在script段为组件设置props传递给其他组件渲染

导入的.vue单文件组件本质是组件配置对象，不包含运行时的props传值，你需要在组件实例化阶段绑定props，有两种通用方案：

方案1：用h函数预生成带props的VNode（通用无依赖） #

这是兼容性最好的方案，返回的结果可以直接被任意支持渲染VNode的组件接收，不需要组件B做额外适配。

// Vue3 引入h
import { h } from 'vue'
// Vue2 可以直接用组件实例上的$createElement，不需要额外引入
import MyComponent from '/MyComponent.vue'

export default {
  computed: {
    compnt: function () {
      // h函数第二个参数就是要绑定的props、事件等配置
      return h(MyComponent, {
        // 在这里写所有需要传入的props，支持绑定响应式变量
        propA: '固定传值',
        propB: this.someReactiveData,
        // 如果需要给组件绑定自定义事件，按on+事件名大驼峰格式写即可
        onCustomEvent: this.handleEvent
      })     
    }
  }
}

方案2：组件与props分离传递（适合组件B支持自定义props入参的场景） #

如果组件B本身提供了独立的props传参入口（比如多数通用组件库的弹窗、动态组件容器都会提供componentProps类的配置项），不需要提前包装VNode，直接把组件定义和props对象分别传给组件B即可。

<template>
  <!-- 以组件B接收component、componentProps两个prop为例 -->
  <ComponentB 
    :component="compnt" 
    :component-props="compProps"
  />
</template>
<script>
import MyComponent from '/MyComponent.vue'
export default {
  data() {
    return {
      compProps: {
        propA: '固定传值',
        propB: this.someReactiveData
      }
    }
  },
  computed: {
    compnt: function () {
      // 直接返回组件原始定义即可，不需要额外处理
      return MyComponent     
    }
  }
}
</script>

注意：不要直接修改导入的MyComponent组件配置上的props默认值，该操作会全局污染组件，导致其他位置引用MyComponent时出现异常props值。

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