问题

Reproducer: https://stackblitz.com/edit/vue-tjt1qp?file=src/components/ParentComponent.js

在上面的复现中，我期望子组件的行为与父组件相同。

我试图通过渲染函数将属性传递给子组件。

const submitting = ref('...');
const childComponent = h(ChildComponent, { loading: submitting.value });

return () => h('div', props, [slots.default(), childComponent]);

然而，它们不是响应式的。我阅读了 vuejs 文档 关于渲染函数，但未找出我做错了什么。显然，我漏掉了某些东西...是什么呢？

const submitting = ref('...');
const childComponent = h(ChildComponent, { loading: submitting.value });

return () => h('div', props, [slots.default(), childComponent]);

答案1

得分: 2

以下是翻译好的部分：

在 vuejs 的 dischord 频道里有人帮助了我。

Instead of writing

```javascript
const childComponent = h(ChildComponent, { loading: submitting.value });

// render function
return () => h('div', props, [slots.default(), childComponent]);

在上面的示例中，childComponent 的 vNode 只创建一次。这是因为 setup 函数只调用一次，而渲染函数会被多次调用，参见，例如，vueJs 文档 上有关声明渲染函数的内容。我需要确保childComponent的 vNode 在将其移到渲染函数内时重新渲染：

// render function
return () => {
  const childComponent = h(ChildComponent, { loading: submitting.value });
  return h('div', props, [slots.default(), childComponent]);
}

或者，我可以在父元素的 hyperscript 函数内调用 hyperscript 函数 h()：

// render function
return () => h(
    'div',
    props,
    [
        slots.default(),
        h(ChildComponent, { loading: submitting.value })
    ]
);

或者，在将子组件的 hyperscript 函数赋值给变量时，将其包装在一个函数内：

const childComponent = function () {
    return h(ChildComponent, { loading: submitting.value });
};
// render function
return () => h('div', props, [slots.default(), childComponent()]);

<details>
<summary>英文:</summary>

Someone in the vuejs dischord channel helped me out.

Instead of writing

```javascript
const childComponent = h(ChildComponent, { loading: submitting.value });

// render function
return () =&gt; h(&#39;div&#39;, props, [slots.default(), childComponent]);

In the example above, the childComponent's vNode is created only once. This is because setup functions are called once, while render functions get called multiple times, see. e.g., vueJs docs on declaring render functions. I need to make sure that the childComponent's vNode is re-rendered by shifting it inside the render function:

// render function
return () => {
  const childComponent = h(ChildComponent, { loading: submitting.value });
  return h('div', props, [slots.default(), childComponent]);
}

Alternatively, I could call the the hyperscript function h() inside the parents hyperscript function:

// render function
return () => h(
    'div',
    props,
    [
        slots.default(),
        h(ChildComponent, { loading: submitting.value })
    ]
);

Or, when assigning the child component's hyperscript function to a variable, wrap it inside a function

const childComponent = function () {
    return h(ChildComponent, { loading: submitting.value });
};
// render function
return () => h('div', props, [slots.default(), childComponent()]);

答案2

得分: 0

以下是您要翻译的内容：

const childComponent = h(ChildComponent, { loading: submitting.value });

翻译后的代码部分：

const childComponent = h=>(h(ChildComponent, { loading: submitting.value }));

"It works may be like computed." 不需要翻译。

const childComponent = h(ChildComponent, { loading: submitting.value });

 const childComponent = h=>(h(ChildComponent, { loading: submitting.value }));