Vue3透明组件包装器不起作用答案

【问题标题】：Vue3 Transparent component wrapper not workingVue3透明组件包装器不起作用
【发布时间】：2020-03-07 18:39:48
【问题描述】：

我正在测试 vue3 并想用新版本制作一个透明的包装组件（我会经常使用的东西）。使用新语法，它应该像v-bind="attrs" 一样简单。但是，这似乎对我不起作用，并且到目前为止还没有太多文档。任何人都知道问题可能是什么？有关我如何实现它的更多详细信息，请参阅 codepen。

https://codepen.io/sumcoding/pen/mdJqwgj

【问题讨论】：

标签： vue.js

【解决方案1】：

我不知道 codepen 是否是重现此问题的好地方，因为我不知道如何进行导入 -> import { reactive } from "vue"; 所以你的 myValue 将是反应性的。

无论如何，我已经使用 <input v-model="attrs.modelValue"> 让它工作了。

这里是codepen

顺便说一句既然你已经注册了props，你不需要在setup方法中返回它们;-)

【讨论】：

感谢您的回复。这更接近预期结果，当父组件更改时，子组件中的值会更新，但子组件似乎仍然无法更新值。在这种情况下，const { reactive } = Vue; 是导入所需要的，但响应式无助于解决问题。

【解决方案2】：

Vue.js 3 final 的透明包装组件模式可以这样实现

<template>
  <label>{{ label }}</label>
  <input
    type="text"
    :value="modelValue"
    v-bind="$attrs"
    @input="$emit('update:modelValue', $event.target.value)"
  />
</template>

<script>
export default {
  name: 'InputWrapper',
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    label: {
      type: String,
      default: ''
    }
  },
  emits: ['update:modelValue']
};
</script>

您可以查看一个示例以及 Vue.js 3 here 模式的另一个变体。

【讨论】：