Question

两天前我启动了Vue.js，我已经需要您的帮助。

我有一个状态机组件，该组件呈现作为参数传递的子组件。因为我事先不知道我将显示哪个组件及其所需的道具，所以我使用render函数而不是状态机父组件的模板。

代码摘录如下：

  function render(h) {
    const app = this;
    props.reduce((acc, key) => ((acc[key] = app[key]), acc), currentPropsObj);
    console.log("child props", currentPropsObj);

    return app.hasStarted
      ? h(
          renderComponent,
          {
            // copy the props from the machine vue component to the render component
            props: Object.assign({}, currentPropsObj)
          },
          []
        )
      : h("div", {}, "LoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLoLo");
  }

  return Vue.component(name, {
    render,
    data: function() {
      return initialData;
    },
    methods: {
      set: function(stateObj) {
        Object.keys(stateObj).forEach(key => (this[key] = stateObj[key]));
      }
    },

问题在于动态renderComponent似乎并未考虑它（应该）作为参数接收的props。我检查了currentPropsObj是否正确计算。使用Vue devtool，我还检查了Search子组件（我在演示中使用的那个）道具在更新其父数据时是否未覆盖。

为进行完整的演示和复制，我制作了一个codeandbox：https://codesandbox.io/s/m5jzqw9w3y

我该怎么办？

动态模板-子组件的道具应该是反应性的，但不是

0 个答案: