[ Vue.js 3 ] 组件中 <textarea> 中 <slot/> 的最佳替代方案

Question

我想创建带有文本区域的组件并在其中传递数据，例如

<c-textarea> hello world </c-textarea>

但经典<slot/>标签在文本区域内不起作用什么是最简单和最干净的替代方案

<template>
   <textarea><slot/></textarea>
</template>

在 Vue.js 3 中

Answer 1

您应该使用value&input来绑定内容而不是使用slot

CTextarea这是组件的更新版本

<template>
  <textarea :value="modelValue" @input="$emit('update:modelValue', $event.target.value)">
  </textarea>
</template>

<script>
export default {
  name: 'CTextarea',

  emits: ['update:modelValue'],

  props: {
    modelValue: String,
  },
};
</script>

检查这个沃金演示