如何在Vue的render函数中传递动态props，实现基于描述的组件动态渲染？

你遇到的核心问题有两个：一是Props传递的是字符串路径而非实际响应式数据，导致输入框显示路径文本而非目标值；二是事件回调的this指向错误，无法正确更新父组件的数据。下面是针对性的解决方案：

关键问题拆解 #

1. Props绑定逻辑错误：你在mainComponent.props里传了字符串'values.value1'，但Vue会直接把它当作静态文本传给子组件，不会自动解析成父组件data里的响应式变量。
2. 事件this指向失效：用箭头函数定义input回调时，this不会指向Vue实例（箭头函数继承定义时的上下文），自然没法更新values.value1。

解决方案实现 #

我们需要做两个核心调整：

• 解析Props路径字符串：在custom-component里根据路径从父组件拿到实际的响应式数据，保证双向绑定的响应性。
• 修复事件回调的this指向：改用路径传递的方式让子组件统一处理更新，避免this指向混乱。

步骤1：添加路径解析工具方法 #

先写两个工具函数，用来根据字符串路径获取和设置对应的数据：

// 根据路径从对象中获取值
const getValueByPath = (obj, path) => {
  return path.split('.').reduce((current, key) => current[key], obj)
}

// 根据路径给对象设置值
const setValueByPath = (obj, path, value) => {
  const keys = path.split('.')
  const lastKey = keys.pop()
  const target = keys.reduce((current, key) => current[key], obj)
  target[lastKey] = value
}

步骤2：修改custom-component的渲染逻辑 #

在render函数里，把描述对象里的路径字符串解析成实际数据，同时处理事件的更新逻辑：

Vue.component('custom-component', {
  props: ['descriptor'],
  render: function (createElement) {
    // 解析Props：把路径转为实际响应式值
    const resolvedProps = {}
    Object.entries(this.descriptor.props).forEach(([key, path]) => {
      resolvedProps[key] = getValueByPath(this.$parent.$data, path)
    })

    // 解析事件：根据路径更新父组件数据
    const resolvedEvents = {}
    Object.entries(this.descriptor.events).forEach(([eventName, path]) => {
      resolvedEvents[eventName] = (value) => {
        setValueByPath(this.$parent.$data, path, value)
      }
    })

    const attributes = {
      props: resolvedProps,
      on: resolvedEvents
    }

    return createElement(this.descriptor.component, attributes)
  }
})

步骤3：调整父组件的描述配置 #

把事件回调改成传递数据路径字符串，让子组件统一处理更新：

const app = new Vue({
  el: '#q-app',
  data: function(){
    return {
      mainComponent: {
        component: 'q-input',
        props: {
          value: 'values.value1' // 保留路径字符串
        },
        events: {
          input: 'values.value1' // 传递要更新的路径
        }
      },
      values: {
        value1: 'hello'
      }
    }
  }
})

完整可运行代码 #

<!DOCTYPE html>
<html>
<body>
<div id="q-app">
  The text input should say 'hello' instead of 'values.value1'
  <custom-component :descriptor="mainComponent"></custom-component>
  <p>Current value: {{ values.value1 }}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@^2.0.0/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@1.15.15/dist/quasar.umd.min.js"></script>
<script>
// 路径解析工具方法
const getValueByPath = (obj, path) => {
  return path.split('.').reduce((current, key) => current[key], obj)
}

const setValueByPath = (obj, path, value) => {
  const keys = path.split('.')
  const lastKey = keys.pop()
  const target = keys.reduce((current, key) => current[key], obj)
  target[lastKey] = value
}

Vue.component('custom-component', {
  props: ['descriptor'],
  render: function (createElement) {
    // 解析Props路径
    const resolvedProps = {}
    Object.entries(this.descriptor.props).forEach(([key, path]) => {
      resolvedProps[key] = getValueByPath(this.$parent.$data, path)
    })

    // 解析事件路径
    const resolvedEvents = {}
    Object.entries(this.descriptor.events).forEach(([eventName, path]) => {
      resolvedEvents[eventName] = (value) => {
        setValueByPath(this.$parent.$data, path, value)
      }
    })

    const attributes = {
      props: resolvedProps,
      on: resolvedEvents
    }

    return createElement(this.descriptor.component, attributes)
  }
})

const app = new Vue({
  el: '#q-app',
  data: function(){
    return {
      mainComponent: {
        component: 'q-input',
        props: {
          value: 'values.value1'
        },
        events: {
          input: 'values.value1'
        }
      },
      values: {
        value1: 'hello'
      }
    }
  }
})
</script>
</body>
</html>

额外优化提示 #

• 如果你的组件描述里既有静态Props又有路径式Props，可以加个判断（比如检查值是否是包含.的字符串），只解析路径类型的Props。
• 要是需要多层组件嵌套，this.$parent不够灵活，可以用provide/inject传递父组件的$data，或者用Vuex统一管理数据，子组件直接通过$store获取和更新数据。

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