Vue.js Vue3：如何在功能组件中重用插槽vnode

<input :key="1"/>

<script setup>
import { ref, withDirectives, vModelText} from 'vue'

const msg = ref('Hello world...');

const wrapper = (props, {slots}) => {
  const out = slots.default();
  out.forEach(vnode => (vnode.key = 1) && Object.assign(vnode.props ??= {}, {
    'onUpdate:modelValue': text => props['onUpdate:modelValue'](text)
  }));
  return out.map(vnode => withDirectives(vnode, [[vModelText, props.modelValue]]));
};

</script>

<template>
  <h1>{{ msg }}</h1>
  <wrapper v-model="msg">
    <input/>
  </wrapper>
</template>

const wrapper = (props, {slots}) => {
    const out = slots.default();
    
    const clonedVNodes = out.map(vnode => {
        const clonedVNode = cloneVNode(vnode, {
            'onUpdate:modelValue': text => props['onUpdate:modelValue'](text)
        });

        return withDirectives(clonedVNode, [[vModelText, props.modelValue]]);
    });

    return clonedVNodes;
};

Vue.js相关问答推荐

保持页面重新加载之间的状态

Svelte 中的简单react 性实验以意想不到的方式失败了. Vue 等效项没有

在组件上的 Vue 3 中获取 URL 查询参数

如何有条件地更改 vue/vuetify 文本字段 colored颜色

axios.patch / axios.put 在 Vue 和 Laravel 中不起作用

重新加载发布到 Github 页面的 Vue 网站时出现 404

如何将 vuetify 2.0 beta 安装到新的 vue cli 项目中？

使用 Vee-Validate 在提交时验证子输入组件

Vue router路由，Root Vue 没有数据？

Vue.js 处理多次点击事件

Vue 3 组合 API，如何在 setup() 函数中获取上下文父属性？

Vuetify Jest 未知自定义元素

我如何能够在 vue js html 中以给定格式进行多项 Select 和传递数据？

从 ajax 调用填充 Vue.js 中的下拉列表

在 Vue JS 组件中使用 Laravel 路由的最佳方法是什么

检测 Vue-Router 导航Guards中的后退按钮

Vuetify v-data-table 固定标题不起作用

Vuex 模块Mutations

使用 vue.js 获取调用元素

禁用外部主题文件产生的 Dart SASS 警告